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

Question

我试图删除特定div后的所有兄弟元素，让我们说id为id = id8的div标签。

<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）关闭<div>标签！ 它应该如下所示：

<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>

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

PS此解决方案的应用完全符合您的要求如下

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 ，我觉得这表明他们知道这个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团队提交了一个bug。