jquery Удалить элементы братьев и сестер, не работает в IE7

Question

Я пытаюсь удалить все родственные элементы после определенного 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')

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>

Прокомментируйте здесь, если у вас есть еще проблемы по этому поводу!

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

Answer 2

Две вещи!

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 3

РЕДАКТИРОВАТЬ:

Отредактируйте ответ ниже, чтобы добавить то, что должно быть решением проблемы:

$("#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.