選擇ul與x個孩子

我有下一個結構：ul> li> ul>（x數量的li）。我的問題是，我如何選擇元素只有：ul> li> ul>（3或更少）。那是因爲我只需要在這個元素中做一些動作。我有，但是......你知道，我在我的Jquery諾夫：「（選擇ul與x個孩子

$(document).ready(function(){ 

var hideElement = $(".show-more-option") 
    if($('.content').length<=3){    
     $hideElement.switchClass(".show-more", "hide-more");   
    } 
});

來源

2017-08-01 Javier Brausin

你可以做到這一點很容易地使用jQuery的.filter()：

$(function() { 
 
    let threeOrFewer = $("ul").filter(function() { 
 
    return $(this).find("li").length <= 3; 
 
    }); 
 
    threeOrFewer.addClass("switchClass"); 
 
});

.switchClass { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
</ul> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
</ul> 
 
<ul> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>

來源

2017-08-01 23:12:36 dave

你可以做這樣的事情

稱爲countListItems功能需要一個UL作爲函數參數和計算它包含的li兒童的數量，並查看該數字是否小於或等於3.如果是，則向ul添加一個類，'three or less'。

該類所要做的就是添加一個綠色的背景顏色與符合條件的ul相對應，這樣可以區分給定ul中的li的數量。一旦你正確識別出你想要的ul的數量n你的標準，你可以專門針對那些ul的風格，或讓他們表現出你想要的。

請注意，樣本標記中有2個ul，我們正在針對它們運行我們的函數countListItems。第一個ul，有一個'foo'類，有3個li的孩子，所以我們有一個匹配並且想要定位這個ul。然而，第二個（帶有'bar'類的ul）包含超過3個li的孩子，所以我們對這個ul沒有做任何事情。

https://jsbin.com/neradafice/edit?html,js,output

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      ul.threeOrLess { 
       background-color: green; 
      } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li> 
       1 
       <ul class="foo"> 
        <li>a</li> 
        <li>b</li> 
        <li>c</li> 
       </ul> 
      </li> 
      <li>2</li> 
      <li>3</li> 
     </ul> 
     <ul> 
      <li> 
       1 
       <ul class="bar"> 
        <li>a</li> 
        <li>b</li> 
        <li>c</li> 
        <li>d</li> 
       </ul> 
      </li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
     </ul> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       countListItems($('.foo')); 
       countListItems($('.bar')); 
      }); 

      function countListItems(ul) { 
       if (ul.children('li').length <= 3) { 
        ul.addClass('threeOrLess') 
       } 
      } 
     </script> 
    </body> 
</html>

來源

2017-08-01 23:09:29 eulloa

選擇ul與x個孩子

回答

相關問題