Question

我正在尝试删除特定div之后的所有兄弟元素，让我们说div标记为id = id8。

<form>    
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>

为此，我在jquery中使用以下代码。

$("#id8 ~ div").remove();

它在Firefox中运行良好，但它在IE7中不起作用。

是否有另一种方法来实现这一点，使用jquery并从我想要开始删除元素的元素中给出标记id？感谢

感谢大家的帮助我根据接受的答案结束了这个解决方案

function removeAfter(el,tag){
    element = $('#'+el);
    var aElements = $(tag,element.parent());
    var index = (aElements.index(element));

    for(i=(index+1);i<aElements.length;i++) {
        $('#'+$(aElements.get(i)).attr('id')).remove();
    }
}

只需致电

removeAfter('id8', 'div')

Answer 1

两件事！

1）关闭你的＆lt; div＆gt;标签！它应该是这样的：

<form>
    <div id="id5">something ...</div>
    <div id="id8">something ...</div>
    <div id="id3">something ...</div>
    <div id="id97">something ...</div>
    <div id="id7">something ...</div>
    <div id="idn">some text ...</div>
</form>

2）〜运算符仅匹配匹配元素后面的兄弟（即匹配 id3 ， id97 ， id7 和 idn ，但不是 id5 ）。要匹配每个兄弟，包括 id5 ，请执行以下操作：

$("#id8").siblings("div").remove();

这应该只剩下 id8 。我在Firefox 3.5.5和IE7.0中测试了这个。希望有所帮助！

Answer 2

这里有三个步骤：

找到我们点击的元素的索引号，相对于其父元素。
遍历此父级中包含的所有div元素，从刚刚找到的那个开始

删除找到的每个div

$(document).ready(function(){
        $('#parent').children().click(function(){
            var index = ($('div',$(this).parent()).index(this));
            for(i=(index+1);i<$('div',$(this).parent()).length;i++){
                $($('div',$(this).parent()).get(i)).hide();
            }
        });
});

这适用于此HTML

<div id="parent">
    <div id="c1">c1</div>
    <div id="c2">c2</div>
    <div id="c3">c3</div>
    <div id="c4">c4</div>
    <div id="c5">c5</div>
</div>

如果您在此事上遇到任何问题，请在此处发表评论！

P.S。完全符合您要求的此解决方案的应用如下

function removeAfter(el){
    element = $('#'+el);
    var index = ($('*',element.parent()).index(element));
    for(i=(index+1);i<$('*', element .parent()).length;i++){
        $($('*', element.parent()).get(i)).hide();
    }
};

Answer 3

编辑：

编辑下面的答案，添加应该解决问题的方法：

$("#id8").nextAll().remove();

结束编辑。

确定。这似乎是一个有趣的错误 - 初步测试似乎表明它是一个jquery错误，虽然我没有在任何地方找到任何特定的提及。

该错误似乎是如果您的初始选择器标记与其兄弟姐妹的类型相同，那么它将无法返回IE7中的任何兄弟姐妹。

我使用选择器本身的jQuery示例代码测试了它，并且能够在模拟IE7的IE8中复制您的问题。

如果你检查jquery示例代码，我会在下面看到你可以看到他们用作初始选择器的实际元素是span并且兄弟元素都是divs whcih似乎告诉我他们知道这个bug并且没有记录它，这既狡猾又糟糕。

<script>
  $(document).ready(function(){
    $("#prev ~ div").css("border", "3px groove blue");
  });
</script>

  <div>div (doesn't match since before #prev)</div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
  <div>div sibling <div id="small">div niece</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>

将#prev span更改为div，您将获得与目前相同的失败。我向jquery团队提交了一个错误。

jquery删除兄弟元素，在IE7中不起作用

3 个答案: