jquery Supprime 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 la balise 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 bien dans Firefox, mais pas dans IE7.

Existe-t-il une autre solution pour résoudre ce problème, en utilisant jquery et en donnant simplement le tag id de l’élément que je veux commencer à supprimer des é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();
    }
}

il suffit d'appeler

removeAfter('id8', 'div')

Answer 1

Trois étapes ici:

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

• Supprimer chaque division trouvée

  $(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 code 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 en la matière!

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 votre < div > Mots clés! 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) L'opérateur ~ ne fait correspondre que les frères et sœurs qui suivent l'élément correspondant (c'est-à-dire qu'il correspond à id3 , id97 , id7 et idn , mais pas id5 ). Pour faire correspondre tous les frères et soeurs, y compris id5 , procédez comme suit:

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

Cela devrait vous laisser juste id8 . J'ai testé cela dans Firefox 3.5.5 et IE7.0 quelque chose. J'espère que ça aide!

Answer 3

EDIT:

Modification de la réponse ci-dessous pour ajouter une solution au problème:

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

END EDIT.

Ok. Cela semble être un bogue intéressant - les tests initiaux semblent indiquer qu’il s’agit d’un bogue jQuery bien que je n’aie trouvé aucune mention spécifique à ce sujet nulle part.

Le problème semble être que si votre balise de sélecteur initiale est du même type que ses frères, elle ne renverra aucun frère dans IE7.

Je l'ai testé à l'aide de l'exemple de code jQuery pour le sélecteur lui-même et j'ai pu dupliquer votre problème dans IE8 en émulant IE7.

Si vous vérifiez l’exemple de code jquery que je vais coller ci-dessous, vous verrez que l’élément réel qu’ils utilisent comme sélecteur initial est un span et que les éléments frères sont tous divs ce qui me semble indiquer ils connaissent l'existence de 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 en div et vous obtiendrez le même échec que celui que vous avez actuellement. Je soumettrais un bug avec l'équipe de jquery.