jQuery - find và children

find và children là hai hàm được jQuery xây dựng để truy xuất tới các phần tử con của một HTML DOM được chọn

• find(jquery selector): dùng để lấy toàn bộ các phần tử con(cấp 1, 2, 3...) của đối tượng hiện hành theo selector.
• children(): dùng để lấy toàn bộ các phần tử con cấp 1 của đối tượng hiện hành theo selector.
• children(jquery selector): dùng để lấy toàn bộ các phần tử con cấp 1 của đối tượng hiện hành theo selector.

Code

<script>
jQuery(document).ready(function(){
 jQuery("#butChild1").click(function(){
  jQuery("#test_ul").children().css("color","red");
 });
 jQuery("#butChild2").click(function(){
  jQuery("#test_ul").children(".green").css("color","blue");
 });
 jQuery("#butFind1").click(function(){
  jQuery("#test_ul").find("li").css("color","green");
 });
 jQuery("#butFind2").click(function(){
  jQuery("#test_ul").find(".gray").css("color","yellow");
 });
});
</script>
<style>
.red{color:red;}
.green{color:green;}
.blue{color:blue;}
.gray{color:gray;}
</style>
<div>
 <div style="float:left;border:1px solid gray;displày:block;width:350px;">
  <ul id="test_ul">
   <div>con cấp 1 khong phai thẻ li</div>
   <li>con cấp 1 thẻ li
    <ul>
     <li>con cấp 2 thẻ li
      <ul>
       <li>con cấp 3 thẻ li</li>
       <li class="gray">con cấp 3 thẻ li có class là gray</li>
      </ul>
     </li>
     <li class="gray">con cấp 2 thẻ li có class là gray</li>
     <li class="gray">con cấp 2 thẻ li có class là gray</li>
    </ul>
   </li>
   <li class="green">con cấp 1 thẻ li có class là green</li>
   <li class="green">con cấp 1 thẻ li có class là green</li>
   <li>con cấp 1 thẻ li</li>
  </ul>
 </div>
 <div style="float:left;padding:20px;">
  <input type="button" id="butChild1" value="Children not selector"/><br/>
  <input type="button" id="butChild2" value="Children with selector"/><br/>
  <input type="button" id="butFind1" value="Find li"/><br/>
  <input type="button" id="butFind2" value="Find li with class"/><br/>
 </div>
</div>

Demo

con cấp 1 khong phai thẻ li
• con cấp 1 thẻ li
  • con cấp 2 thẻ li
    • con cấp 3 thẻ li
    • con cấp 3 thẻ li có class là gray
  • con cấp 2 thẻ li có class là gray
  • con cấp 2 thẻ li có class là gray
• con cấp 1 thẻ li có class là green
• con cấp 1 thẻ li có class là green
• con cấp 1 thẻ li