Question

这是我的问题：

我有一个主容器中包含的元素列表，如下所示：

<span class="main_container">
    <span id=".." class=".." position="1"...> </span>
    <span id=".." class=".." position="2"...> </span>  
    <span id=".." class=".." position="3"...> </span>
    <span id=".." class=".." position="4"...> </span>
    <span id=".." class=".." position="5"...> </span>
    <span id=".." class=".." position="6"...> </span>
</span>

我将ID和位置用于不同目的。现在，当我点击位置4处的元素时，我希望系统删除范围4，以及它下面的所有字符串。即5,6。

我如何做到这一点是jQuery？我试过.parents()但是没有这样做。

由于

Answer 1

你想用这个：

http://api.jquery.com/nextAll/

$('.main_container').find('span').click(function(){
  var jq_this = $(this);
  jq_this.nextAll().remove();  // remove all later siblings
  jq_this.remove();            // removes self
});

Answer 2

在子级跨度上绑定.click()，使用.index()获取其序列索引，然后使用:gt()选择器查找超过它的元素并使用.add()

$('.main_container span').click(function(){
    // get position of current element
    var index = $(this).index();
    // delete this and all elements past this element
    $(this).parent().find('span:gt('+index+')').add(this).remove();
});

示例：http://jsfiddle.net/cDZqk/

如果还有更多嵌套，您也可以使用.children()：

$('.main_container span').click(function(){
    // get position of current element
    var index = $(this).index();
    // delete this and all elements past this element
    $(this).parent().children(':gt('+index+')').add(this).remove();
});

示例：http://jsfiddle.net/cDZqk/1/

或者，您知道，您可以使用.nextAll并让它为您处理。的：诅咒： 的

BYossarian答案的“单行”版本：

$('.main_container span').click(function(){ $(this).nextAll().add(this).remove(); });

示例：http://jsfiddle.net/cDZqk/2/

删除列表中的项目后面的元素jQuery

2 个答案: