jquery Rimuovi elementi fratelli, non funziona in IE7

Question

Sto cercando di rimuovere tutti gli elementi fratelli dopo un div specifico, diciamo il tag div con 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>

Per farlo uso il seguente codice in jquery.

$("#id8 ~ div").remove();

Funziona bene in Firefox, ma non funziona in IE7.

C'è un modo alternativo per archiviarlo, usando jquery e semplicemente dando il tag id dall'elemento che voglio iniziare a rimuovere gli elementi? Grazie

---

Grazie a tutti per il vostro aiuto Finisco con questa soluzione basata sulla risposta accettata

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

basta chiamare

removeAfter('id8', 'div')

Answer 1

Tre passaggi qui:

• Trova il numero indice dell'elemento su cui abbiamo fatto clic, rispetto al suo genitore.
• Ripercorri tutti gli elementi div contenuti in questo genitore, iniziando dopo quello che abbiamo appena trovato

• Elimina ogni div trovato

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

Funzionerà su questo 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>

Commenta qui se hai altri problemi in proposito!

P.S. Un'applicazione di questa soluzione esatta alla tua richiesta è la seguente

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

Due cose!

1) Chiudi < div > i tag! Dovrebbe apparire così:

<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) L'operatore ~ corrisponde solo ai fratelli che seguono l'elemento corrispondente (ovvero corrisponderà a id3 , id97 , id7 e idn , ma non id5 ). Per abbinare tutti i fratelli, incluso id5 , devi fare questo:

$("#id8").siblings("div").remove();

Questo dovrebbe lasciarti solo con id8 . Ho provato questo in Firefox 3.5.5 e IE7.0something. Spero che ti aiuti!

Answer 3

EDIT:

Modifica la risposta di seguito per aggiungere quella che dovrebbe essere una soluzione al problema:

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

MODIFICA FINE.

Ok. Questo sembra essere un bug interessante - i test iniziali sembrano indicare che si tratta di un bug jquery anche se non ne ho trovato alcuna menzione specifica da nessuna parte.

Il bug sembra essere che se il tag del selettore iniziale è dello stesso tipo dei suoi fratelli, allora non riuscirà a restituire i fratelli in IE7.

L'ho provato usando il codice di esempio jQuery per il selettore stesso ed è stato in grado di duplicare il tuo problema in IE8 emulando IE7.

Se controlli il codice di esempio jquery che ti atterrerò qui sotto puoi vedere che l'elemento reale che stanno usando come selettore iniziale è span e che gli elementi fratelli sono tutti divs che mi sembra indicare conoscono questo bug e non lo hanno documentato, il che è al tempo stesso astuto e di merda.

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

Cambia #prev span in div e otterrai lo stesso errore che stai ricevendo attualmente. Invierei un bug con il team di jquery.