jquery Supprimer les éléments de la fratrie, ne fonctionne pas dans IE7

Question

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

Il fonctionne bien dans Firefox, mais pas dans IE7.

Existe-t-il un autre moyen d'archiver ceci, en utilisant jquery et en donnant simplement l'id de la balise de l'élément que je veux commencer à retirer les éléments ? Merci

---

Merci à tous pour votre aide Je me retrouve avec cette solution basée sur la réponse acceptée

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

appelez juste

removeAfter('id8', 'div')

Answer 1

Deux choses !

1) Fermez vos balises <div> ! Cela 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) Le ~ ne correspond qu'aux frères et sœurs qui suivent l'élément recherché (c'est-à-dire qu'il correspondra aux éléments suivants id3 , id97 , id7 y idn mais pas id5 ). Pour correspondre à tous les frères et sœurs, y compris id5 vous faites ça :

$("#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 vous aidera !

Answer 2

Trois étapes ici :

• Trouvez le numéro d'index de l'élément sur lequel nous avons cliqué, par rapport à son parent.
• Boucle sur tous les éléments div contenus dans ce parent, en commençant par 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 fonctionnera 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 répondant exactement à 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 3

EDITAR:

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

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

FIN DE L'ÉDIT.

Ok. Il s'agit d'un bogue intéressant. Les premiers tests semblent indiquer qu'il s'agit d'un bogue de Jquery, mais je n'ai trouvé aucune mention spécifique à ce sujet nulle part.

Le problème semble être que si votre balise de sélection initiale est du même type que ses frères et sœurs, elle ne renvoie pas de frères et sœurs 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 d'exemple jquery que 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 et sœurs sont tous divs ce qui me semble indiquer qu'ils connaissent ce bogue 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>

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