CODEWITHSUNDEEP
javascriptjquerydom
Gobinath M
Gobinath M

Reputation: 2021

How to find the text() when I click on particular element?

when I click on "press me" span text , I need to get "fold2" text() value. I tried to add lot of jquery traverse methods in my script, but I can't find the perfect one.

Because of my <li> including lot of <span> tag available.

HTMl Code:

<li class="favdelParentFold">
    <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
       <span class="caret-right"></span>
    </a>
    <span class="folder"></span>
    <span style="color:red;">fold2</span>
    <span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>

    <ul class="collapse in" id="parentLevel1" aria-expanded="true">
    </ul>

</li>

JS Code

// when click on "press me" text I need to get span value of fold2

$(document).ready(function() {
  $(".favdelParentFold span").click(function(){
var tr=$(this).closet().find('a').text();
alert(tr);//Expecting output is "fold2"
});
});

Working Code

https://jsfiddle.net/atg5m6ym/383/

Upvotes: 1

Views: 71

Answers (4)

John R
John R

Reputation: 2801

Try this.

If you want to get the "fold2" text, you can set click event for span.trashcan alone. On this click event you can get that value by using prev("span").

// when click on "press me" class i need to get span value of fold2

$(document).ready(function() {
  $(".favdelParentFold > .trashcan").click(function() {
    var tr = $(this).prev('span').text();
    alert(tr);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<li class="favdelParentFold">
  <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
    <span class="caret-right"></span>
  </a>
  <span class="folder"></span>
  <span style="color:red;">fold2</span>
  <span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan">press me</span>

  <ul class="collapse in" id="parentLevel1" aria-expanded="true">
  </ul>

</li>

Hope you are expecting this...

Upvotes: 0

Shashank
Shashank

Reputation: 2060

I have added a class for text - press me text as pressMe. Please find the working jsfiddle. The code is as below:

HTML

<li class="favdelParentFold">
        <a href="#parentLevel1" data-toggle="collapse" class="" aria-expanded="true">
            <span class="caret-right"></span>
        </a>
        <span class="folder"></span>
        <span style="color:red;">fold2</span>
        <span data-toggle="modal" data-target="#AddFavorites_ModalDel" class="trashcan pressMe">press me</span>

        <ul class="collapse in" id="parentLevel1" aria-expanded="true"></ul>

    </li>

JS

$(document).ready(function () {
    $(".pressMe").click(function () {
        alert($(this).prev().text());//Expecting output is "fold2"
    });
});

Upvotes: 0

Atif Tariq
Atif Tariq

Reputation: 2772

Please use it like this: ( Tested )

$(document).ready(function() {
      $(".favdelParentFold span").click(function(){
    var tr = $(this).prev().text();
    alert(tr);//Expecting output is "fold2"
    });
});

Upvotes: 0

user1865775
user1865775

Reputation: 303

Via jQuery, simplest way would be (if for some reason there's really no way to put class on your target):

$('.trashcan').on('click', function(e) {

  var prev = $(this).prev();

  if (prev.length)
  {
      alert( prev.text() );
  }

});

In this case, the code only works if the target is just before the source element.

Another is, assuming your target has a class of .target:

$('.trashcan').on('click', function(e) {

  var parent = $(this).closest('.favdelParentFold');

  if (parent.length)
  {
      alert( parent.find('.target').text() );
  }

});

Better to have the class so you can move around your target and the code would still work.

Upvotes: 1

Related Questions