jQuery .children() gets only direct descendants of each element in the current set of matched elements, filtered by a selector; Also check jQuery .find() if you need to get unlimited level of depth;
<script>
$('ul.list').children('li.target')
.css('background-color', 'yellow')
.append(' <span class="label label-info">.target</span>');
</script> |
<script>
$('ul.list').children('li.target')
.css('background-color', 'yellow')
.append(' <span class="label label-info">.target</span>');
</script>
<ul class="list">
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li class="target">list item with target class</li>
<li>list item</li>
</ul>
</li>
<li class="target">list item with target class</li>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li class="target">list item with target class</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li class="target">list item with target class</li>
</ul>item</li>
</ul>
</li>
<li>list item</li>
<li class="target">list item with target class</li>
</ul> |
<ul class="list">
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li class="target">list item with target class</li>
<li>list item</li>
</ul>
</li>
<li class="target">list item with target class</li>
<li>list item</li>
<li>list item
<ul>
<li>list item</li>
<li class="target">list item with target class</li>
<li>list item</li>
</ul>
</li>
<li>list item</li>
<li class="target">list item with target class</li>
</ul>item</li>
</ul>
</li>
<li>list item</li>
<li class="target">list item with target class</li>
</ul>