Mgr February 2016

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/

Answers


John R February 2016

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...


user1865775 February 2016

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.


Atif Tariq February 2016

Please use it like this: ( Tested )

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


Shashank February 2016

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"
    });
});

Post Status

Asked in February 2016
Viewed 1,247 times
Voted 10
Answered 4 times

Search




Leave an answer