jquery 删除兄弟元素,在 IE7 中不起作用
-
05-07-2019 - |
题
我试图删除特定 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')
解决方案
这里分三步:
- 查找我们单击的元素相对于其父元素的索引号。
- 循环遍历该父级中包含的所有 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();
}
};
其他提示
两件事!
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中测试了这个。希望有所帮助!
编辑:
编辑下面的答案,添加应该解决问题的方法:
$("#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团队提交了一个错误。