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

- luarwo

---

在选择器 #id8 ~ div 前面加上 '#' 可能会有帮助。 - Boldewyn

抱歉，我忘记在jQuery代码中加上#号了。 - luarwo

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中测试过。希望这可以帮到你！

- Rob Grant

Answer 2

这里有三个步骤：

• Find the index number of the element we've clicked, with respect to its parent.
• Loop through all the div elements contained within this parent, starting after the one we just found

• Delete each div found

  $(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();
    }
};

- Gausie

Answer 3

编辑：

在下面的答案中添加一个解决问题的修复：

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

编辑结束。

好的。这似乎是一个有趣的 bug - 初步测试表明这是一个 jquery 的 bug，尽管我在任何地方都没有找到具体的提及。

这个 bug 似乎是这样的：如果你的初始选择器标签与它的兄弟标签相同，则在 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。

- Steerpike

---

我真的怀疑jQuery团队会故意在文档中使用不同的值来隐藏一个bug。我会提交一个bug报告 - http://dev.jquery.com/，尽管听起来似乎与Sizzle有关，而不是jQuery本身。 - Russ Cam