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

Question

我试图删除特定 div 之后的所有同级元素，假设 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

这里分三步：

• 查找我们单击的元素相对于其父元素的索引号。
• 循环遍历该父级中包含的所有 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>

如果您对此事还有任何问题，请在这里评论！

附：该解决方案的应用完全符合您的要求，如下

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 2

两件事！

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 3

编辑：

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

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

结束编辑。

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

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

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

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

<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团队提交了一个错误。