jquery Quitar los hermanos elementos, no funciona en IE7

Question

Estoy tratando de eliminar todos los hermanos elementos después de un determinado div, digamos que la etiqueta 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>

Para hacer eso yo uso el siguiente código en jquery.

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

Funciona bien en Firefox, pero no funciona en IE7.

Hay una forma alternativa de lograr esto, el uso de jquery y acaba dando la identificación de la etiqueta del elemento que desea iniciar la extracción de los elementos?Gracias

---

Gracias a todos por su ayuda Termino con esta solución basada en la aceptación de la respuesta

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

solo llame

removeAfter('id8', 'div')

Answer 1

Tres pasos aquí:

• Encuentre el número de índice del elemento en el que hemos hecho clic, con respecto a su elemento primario.
• Recorre todos los elementos div contenidos en este padre, comenzando después del que acabamos de encontrar

• Eliminar cada div encontrado

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

Esto funcionará en este 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>

¡Comenta aquí si tienes más problemas al respecto!

P.S. Una aplicación de esta solución exacta a su solicitud es la siguiente

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

¡Dos cosas!

1) Cierre su < div > etiquetas! Debería verse así:

<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) El operador ~ solo coincide con los hermanos que siguen el elemento coincidente (es decir, coincidirá con id3 , id97 , id7 y idn , pero no id5 ). Para hacer coincidir a todos los hermanos, incluido id5 , haga lo siguiente:

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

Eso debería dejarlo con solo id8 . Probé esto en Firefox 3.5.5 e IE7.0 algo. ¡Espero que ayude!

Answer 3

EDITAR:

La edición de la respuesta de abajo para agregar lo que debería ser una solución para el problema:

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

FINAL DE EDICIÓN.

Ok.Esta parece ser una interesante bug de la prueba inicial parece indicar que es un jquery error aunque no he encontrado ninguna mención específica en cualquier lugar.

El error parece ser que si su inicial selector de etiqueta es el mismo tipo que sus hermanos no devolver alguno de los hermanos en IE7.

He probado usando el jQuery código de ejemplo para el selector de sí y fue capaz de duplicar su problema en IE8 emulando a IE7.

Si usted compruebe el jquery código de ejemplo yo me quedo abajo se puede ver que el elemento real que está utilizando el selector es un span y el hermano elementos son todos divs la cual me parece indicar que saben acerca de este error y no he documentado, que es la astucia y la mierda.

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

Cambiar el #prev span a un div y obtendrás el mismo error como usted está recibiendo actualmente.Me gustaría enviar un error con el equipo de jquery.