jquery Supprimer les éléments frères, ne fonctionne pas dans IE7

Question

J'essaie de supprimer tous les éléments frères après un div particulier, disons l'étiquette div avec 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> 

Pour ce faire, j'utilise le code suivant dans jquery.

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

Cela fonctionne très bien dans Firefox, mais cela ne fonctionne pas dans IE7.

Existe-t-il une autre façon d'archiver cela, en utilisant jquery et en donnant simplement l'identifiant de la balise à partir de l'élément que je veux commencer à supprimer les éléments? Merci

---

Merci à tous pour votre aide je me retrouve avec cette solution basée sur la juste téléréponse

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

accepté

removeAfter('id8', 'div') 

Answer 1

Trois étapes ici:

• trouver le numéro d'index de l'élément que nous avons cliqué, par rapport à son parent.
• boucle à travers tous les éléments div contenus dans ce parent, en commençant après celui que nous venons de trouver

• Supprimer chaque div trouvé

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

Cela fonctionne sur ce 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> 

Commentez ici si vous avez d'autres problèmes à ce sujet!

P.S. Une application de cette solution exacte à votre demande est la suivante

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

Deux choses!

1) Fermez vos tags <div>! Il devrait ressembler à ceci:

<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'opérateur ~ correspond uniquement frères et sœurs qui suivent l'élément adapté (par exemple, il correspondra id3, id97, ID7 et idn, mais pas id5). Pour correspondre à chaque frère, y compris ID5, vous faites ceci:

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

Cela devrait vous laisser avec juste ID8. J'ai testé cela dans Firefox 3.5.5 et IE7.0quelque chose. J'espère que cela pourra aider!

Answer 3

EDIT:

Modification de la réponse ci-dessous pour ajouter ce qui devrait être une solution pour le problème:

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

FIN EDIT.

Ok. Cela semble être un bug intéressant - les tests initiaux semblent indiquer qu'il s'agit d'un bug jquery bien que je n'en trouve aucune mention spécifique nulle part.

Le bug semble être que si votre balise de sélection initiale est du même type que ses frères et soeurs alors il ne parviendra pas à retourner des frères et soeurs dans IE7.

Je l'ai testé en utilisant le code d'exemple jQuery pour le sélecteur lui-même et j'ai pu reproduire votre problème dans IE8 en émulant IE7.Si vous vérifiez le code exemple jquery je vais coller ci-dessous, vous pouvez voir que l'élément réel qu'ils utilisent comme sélecteur initial est un span et les éléments frères sont tous divs qui me semble indiquer qu'ils connaissent ce bug et ne l'ont pas documenté, ce qui est à la fois rusé et merdique.

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

Modifier le #prev span à un div et vous obtiendrez le même échec que vous obtenez actuellement. Je soumettrais un bug avec l'équipe de jquery.