Question

I have something like this in my page:

<div id="test">
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test</div>
  <div class="item">Test
    <div class="container">
      <div class="item">Test2</div>
      <div class="item">Test2</div>
      <div class="item">Test2</div>
    </div>
  </div>
</div>

Now I want to do something like this:

$.each(this.find(".item"), function(index, value) {
    $(value).html("Test" + $(value).html());
});

Of course I want to do some more stuff inside the loop, but this is only an example. When I do this, all “Test” change into “TestTest”, but “Test2” does not change into “TestTest2”. Is there a way to select these items, even if there are inside another one? Btw: There could be a conatiner in every item. Even in those who are already nested.

Answer 1

The call to $(value).html("Test" + ...) actually removes and re-adds elements, so any descendent elements (with class item) that are iterated over have already been removed from the DOM.

Try the following:

this.find(".item").each(function(index, value) {
  $(value).prepend("<span>Test</span>");
});