How to get html text from a relative element using JQuery?

Question

So I'm trying to get the specific text inside an HTML tag which is a relative from it. The thing is that I have multiple Parents, which means I have multiple calls and diferent texts wanted.

As an example:

    <parent>
       <child>
           <grandchild class="wanted">Text</grandchild>
           <grandchild></grandchild>
       </child>
       <child>
           <grandchild></grandchild>
           <grandchild></grandchild>
       </child>
       <child>
           <grandchild class="calling"></grandchild>
           <grandchild></grandchild>
       </child>
   </parent>

And my script

    $(document).ready(function(){
    $(".calling").click(function(){
       var message = $(this).parent().siblings(".wanted").html();
    });
});

The thing is that I cannot get the Text wanted, and I don't know if I have to parse or not, even when I've already tried so. I hope you can help me.

Answer 1

You can use .closest() with selector "parent" , .find() with selector ".wanted"

 $(document).ready(function() { $(".calling").click(function() { var message = $(this).closest("parent").find(".wanted").html(); console.log(message) }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <parent> <child> <grandchild class="wanted">Text</grandchild> <grandchild></grandchild> </child> <child> <grandchild></grandchild> <grandchild></grandchild> </child> <child> <grandchild class="calling">click</grandchild> <grandchild></grandchild> </child> </parent> 

Answer 2

You could attach the event handler just with on() something like:

$("body").on("click", ".calling", function(){
    // traverse several steps up to the parent, then back down to desired element.
    var message = $(this).parents("parent").find(".wanted").text();
});

From the docs:

The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.

Answer 3

<parent>
       <child> // Child 1
           <grandchild class="wanted">Text</grandchild> // grandChild1
           <grandchild></grandchild>
       </child>
       <child> // Child 2
           <grandchild></grandchild>   // grandChild2
           <grandchild></grandchild>   // // grandChild3
       </child>
       <child> // Child 3
           <grandchild class="calling"></grandchild>   // grandChild4
           <grandchild></grandchild>   // grandChild5
       </child>
   </parent>

If there is a single usage of calling class $('grandChild.wanted').text() will be enough to get text inside grandChild1 on click of grandChild4 .

If there are multiple tags with same .wanted you have to use .each & $(this).text() to get the text content of the tag

If there are multiple .calling class then

$('.calling').on('click',function(event){
  $(this).closest('parent').find('.wanted').text().trim()
})

closest() will always travel up in the DOM tree and will match with the first matched element. trim is used to remove any white space

Answer 4

The thing is that I cannot get the Text wanted, and I don't know if I have to parse or not, even when I've already tried so. I hope you can help me.

This is because you are doing var message = $(this).parent().siblings(".wanted").html();

$(this) -> calling class(grandchild)

$(this).parent() -> <child></child>(3rd one)

$(this).parent().siblings() will give other <child> elements(1st and 2nd one)

Therefore you should be doing $(this).parent().siblings().find('.wanted') so that it can find the grandchild inside the sibling( <child> ).

---

Answer 5

As @Nikhilesh-kv posted, it keeps given me the value of the three different childs, so I had to specified a little bit more. Thank you everyone, every comment is appreciated.

Answer 6

Lots of ways to get this: see all these

console.clear();
$(document).ready(function() {
  $(".calling").on('click', function() {
    var messages = {};
    messages.message0 = $(this).parents('parent').find(".wanted").html();
    // or
    messages.message1 = $(this).parent().parent().find(".wanted").html();
    messages.message2 = $(this).parent('child').siblings().find(".wanted").html();
    messages.message3 = $(this).parent('child').siblings().find(".wanted").text();
    messages.message4 = $(this).parentsUntil('parent').siblings().find(".wanted").html();
    messages.message5 = $('parent').find(".wanted").html(); // if only ONE parent
    messages.message6 = $('parent').find("grandchild.wanted").text(); // if only ONE parent and in grandchild element
    messages.message7 = $('parent').find(".wanted").text(); // if only ONE parent
    messages.message8 = $('parent').find(".wanted").first().text(); // if first ONE present if many
    messages.message9 = $('body').find(".wanted").first().text(); // not recommended but...
    messages.message10 = $('body').find(".wanted").first().text(); // not recommended but...
    messages.message11 = $('parent').find(".wanted").first().text(); // not recommended but...
    messages.message12 = $('parent').find('child').find('grandchild').filter(".wanted").text(); // not recommended but...
    messages.message13 = $('grandchild.wanted').text(); // all of them...
    messages.message14 = $('grandchild.wanted').eq(0).text(); // first of them...
    messages.message15 = $('grandchild.wanted:first()').text(); // first of them...
    console.dir(messages);
  }).trigger('click');
});