Jquery using calling "this" to call their child element

Question

I have this code that came from this link for experiment purposes

jQuery: What's the difference between '$(this)' and 'this'?

$("#orderedlist").find("li").each(function(i) {
  $(this).append(" BAM! " + i);
});

the code $(this).append(" BAM! " + i);

How do you call the child element of this? for example

$(this + ".className").append(" BAM! " + i);

Something like that, but it doesn't work. Any synthax that works for this kind of stuff?

you can use children() to get all children element of this – Oyeme Nov 27 '13 at 17:21 — Oyeme, Nov 27 '13 at 17:21

score 2 · Accepted Answer · answered Nov 27 '13 at 17:20

With method .find() you can search inside the object all child levels. try this;

$(this).find(".className").append(" BAM! " + i);

If you would like to search only into the first child level you can use .children() like this

$(this).children(".className").append(" BAM! " + i);

score 0 · Answer 2 · answered Nov 27 '13 at 17:35

In your code example. You are iterating through each <li> found in #orderedList and you are appending the text BAM! [digit] so $(this) is only referring to the <li>

If you did .append('<span> BAM! ' + i + '</span>') then you can find the child span like this:

var child_text = $(this).append('<span> BAM! ' + i + '</span>').find('span').text();
alert(child_text);

Jquery using calling "this" to call their child element

2 Answers2