पिछले पांच lis और अगले पांच lis

Question

को छोड़कर सभी ली हटाएं, मैं पिछले 0 lis और अगले पांच lis को छोड़कर के भीतर सभी li को हटाना चाहता हूं।

उदाहरण के लिए:

<ul> 
    <li id="Li0"></li> 
    <li id="Li1"></li> 
    <li id="Li2"></li> 
    <li id="Li3"></li> 
    <li id="Li4"></li> 
    <li id="Li5"></li> 
    <li id="Li6"></li> 
    <li id="Li7"></li> 
    <li id="Li8"></li> 
    <li id="Li9"></li> 
    <li id="Li10"></li> 
    <li id="Li11"></li> 
    <li id="Li12"></li> 
    <li id="Li13"></li> 
    <li id="Li14"></li> 
    <li id="Li15"></li> 
    <li id="Li16"></li> 
    <li id="Li17"></li> 
    <li id="Li18"></li> 
    <li id="Li19"></li> 
    <li id="Li20"></li> 
</ul> 

Let मैं id Li9 साथ Li पर क्लिक करें कहते हैं। तो परिणाम

<ul> 
    <li id="Li4"></li> 
    <li id="Li5"></li> 
    <li id="Li6"></li> 
    <li id="Li7"></li> 
    <li id="Li8"></li> 
    <li id="Li9"></li> 
    <li id="Li10"></li> 
    <li id="Li11"></li> 
    <li id="Li12"></li> 
    <li id="Li13"></li> 
    <li id="Li14"></li> 
</ul> 

मुझे पता है कि तत्वों को छोड़कर के लिए :lt() और :gt() चयनकर्ताओं रहे हैं, लेकिन अब तक मैं बहुत प्रगति नहीं किया है किया जाना चाहिए।

Answer 1

आप पिछले और अगले पांच, क्लिक किए गए तत्व के सापेक्ष को छोड़कर सभी तत्वों को निकालना चाहते हैं, तो आप एक साथ .slice()^[docs].index()^[docs] के साथ उपयोग कर सकते हैं:

// assuming `this` refers to the clicked li element 
var index = $(this).index(), 
    $lis = $(this).parent().children(); 

// Math.max(...) guarantees that we are not removing from 0 to the end of 
// the list of `index - 5` is negative. 
// Alternatively you can use `5 > index ? 0 : index - 5` 
$lis.slice(0, Math.max(0, index - 5)).add($lis.slice(index + 6)).remove(); 

---

इस सवाल का जवाब था "सूची में पहले और अंतिम पांच तत्वों के अलावा सभी को हटा दें"।

.slice()^[docs] से कोई लेना देना बहुत आसान है कि:

$("li").click(function() { 
    var $li = $('ul > li').slice($(this).index() - 5, $(this).index() + 6) 
    $('ul > li').not($li).remove(); 
}); 

Example fiddle

:

$('ul > li').slice(5, -5).remove(); 

Answer 2

तत्वों एक के सापेक्ष जो क्लिक किया गया था आप index() उपयोग करने की आवश्यकता पर निकालने के लिए अद्यतन

परिदृश्यों को दर्शाने के लिए जहां सूचकांक + -5 li सूचकांक की सीमा से बाहर है इस प्रयास करें:

$("li").click(function() { 
    var start = $(this).index() - 5; 
    var end = $(this).index() + 6; 
    var $li = $("ul > li"); 

    start = (start < 0) ? 0 : start; 
    end = (end > $li.length) ? $li.length : end; 

    var $keepLi = $li.slice(start, end) 
    $li.not($keepLi).remove(); 
}); 

Example fiddle

Answer 3

मैं :lt() और :gt() चयनकर्ताओं का उपयोग होता है के रूप में आप का उल्लेख किया।

$('ul').on('click', 'li', function (e) { 
    index = $(this).index(); 
    $('ul > li:lt(' + (index - 5) + ')'). 
     add($('ul > li:gt(' + (index + 5) + ')')).remove(); 
    e.preventDefault(); 

});

हम सब li रों एक सूचकांक जो क्लिक किया एक शून्य से 5 से छोटा होता है है का चयन करें, संग्रह करने के लिए सभी li रों है कि एक सूचकांक की तुलना में अधिक जोड़ने प्लस 5 पर क्लिक किया गया, और फिर उन सभी वस्तुओं को हटा दें।

भी कम:

$('ul > li').remove(':lt(' + (index - 5) + '), :gt(' + (index + 5) + ')'); 

Remove() के साथ वर्तमान चयन में मौजूद तत्वों फिल्टर करने के लिए एक वैकल्पिक चयनकर्ता स्वीकार करता है।

देखें उदाहरण here