用jquery選擇最多10個li物品

Question

我想限制選擇。比方說，最多三個。我該怎麼做呢？幫助將非常感激。謝謝。

$(function(){ 
 
var classHighlight = 'highlight'; 
 

 
var $thumbs = $('.gallery-item').click(function(e) { 
 
e.preventDefault(); 
 

 
//add the class to the currently clicked element (this) 
 
$(this).toggleClass(classHighlight); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="gallery"><!--one ul is going to wrap all li's --> 
 

 
<li class="gallery-item">     
 
    <figure class="img-wrapper fade"> 
 
     <a class="img-box" href="#"> 
 
      <img class="center-cropped" alt="gallery image" src="https://placehold.it/180x180.jpg"> 
 
     </a> 
 
    </figure> 
 
</li> 
 

 
<li class="gallery-item"> 
 
    <figure class="img-wrapper fade"> 
 
     <a class="img-box" href="#">     
 
      <img class="center-cropped" alt="gallery image" src="https://placehold.it/180x270.jpg"> 
 
     </a> 
 
    </figure> 
 
</li> 
 

 
<li class="gallery-item">     
 
    <figure class="img-wrapper fade"> 
 
     <a class="img-box" href="#"> 
 
      <img class="center-cropped" alt="gallery image" src="https://placehold.it/180x180.jpg"> 
 
     </a> 
 
    </figure> 
 
</li> 
 
</ul>

Answer 1

只是指望有多少已經有你的classHighlight和行爲適當

var classHighlight = 'highlight'; 

var $thumbs = $('.gallery-item').click(function(e) { 
    e.preventDefault(); 
    // If less than 3 gallery-items have classHighlight 
    if($(".gallery-item." + classHighlight).length<3){ 
     //add the class to the currently clicked element (this) 
     $(this).toggleClass(classHighlight); 
    } 
}); 

Answer 2

var li = $("li").slice(0, 3) 
 
console.log(li, li.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>list item 1</li> 
 
    <li>list item 2</li> 
 
    <li>list item 3</li> 
 
    <li>list item 4</li> 
 
    <li>list item 5</li> 
 
</ul>

您可以在這裏$.slice(start, end)更多信息嘗試https://api.jquery.com/slice/