jQuery之過濾元素

你若精彩，蝴蝶自來發表於2018-07-30
jQuery

還是那句話，這些知識一個小小的練習，更多的請看jQuery手冊

在jQuery物件中的元素物件陣列中過濾出一部分元素來
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)

需求:
1. ul下li標籤第一個
2. ul下li標籤的最後一個
3. ul下li標籤的第二個
4. ul下li標籤中title屬性為hello的
5. ul下li標籤中title屬性不為hello的
6. ul下li標籤中有span子標籤的

<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>

具體實現如下：

//獲得ul下的所有li
  var $lis = $("ul>li");
    // 1. ul下li標籤第一個
    //$lis.first().css("background","red");

    // 2. ul下li標籤的最後一個
    $lis.last().css("background","red");
    // 3. ul下li標籤的第二個
    $lis.eq(1).css("background","red")
    // 4. ul下li標籤中title屬性為hello的
    $lis.filter("[title='hello']").css("background","red");
    // 5. ul下li標籤中title屬性不為hello的
    $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')
    $lis.not('[title=hello]').css('background', 'red')
    // 6. ul下li標籤中有span子標籤的
    $lis.has("span").css('background', 'red');

 

相關文章