jquery Удалить элементы братьев и сестер, не работает в IE7
-
05-07-2019 - |
Вопрос
Я пытаюсь удалить все родственные элементы после определенного 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 и просто указав идентификатор тега из элемента, который я хочу начать удалять элементы?Спасибо
Спасибо всем за вашу помощь, я получаю это решение на основе принятого ответа
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>
Прокомментируйте здесь, если у вас есть еще проблемы по этому поводу!
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();
}
};
Другие советы
Две вещи!
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. Надеюсь, это поможет!
РЕДАКТИРОВАТЬ:
Отредактируйте ответ ниже, чтобы добавить то, что должно быть решением проблемы:
$("#id8").nextAll().remove();
КОНЕЦ РЕДАКТИРОВАНИЯ.
Хорошо.Кажется, это интересная ошибка: первоначальное тестирование показало, что это ошибка jquery, хотя я нигде не нашел конкретного упоминания о ней.
Ошибка, по-видимому, заключается в том, что если ваш исходный тег селектора имеет тот же тип, что и его братья и сестры, то он не сможет вернуть никаких братьев и сестер в IE7.
Я протестировал его, используя пример кода jQuery для самого селектора, и смог продублировать вашу проблему в IE8, эмулирующем IE7.
Если вы проверите пример кода jquery, который я приведу ниже, вы увидите, что фактический элемент, который они используют в качестве начального селектора, представляет собой span
и все родственные элементы divs
что, как мне кажется, указывает на то, что они знают об этой ошибке, но не задокументировали ее, что одновременно и хитро, и дерьмово.
<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.