Insérer de nouveaux DIV entre les deux DIVs qui ont la même classe et sont immédiats frères et sœurs

Aux prises avec celui-ci pendant un certain temps maintenant. Balisage simplifié:

<div class=row>
    <div class="somediv"></div>
    <div class="somediv2"></div>
    <div class="elem"></div>
    <div class="elem"></div>
    <div class="somediv3"></div>
    <div class="somediv4"></div>
<div class=row>
....

J'ai besoin de trouver un moyen de sélectionner tous les DIVs sur le document prêt que:
1. dispose d'une classe: elem
2. de leur côté DIV a aussi le nom de la classe: elem.
Alors j'ai besoin d'insérer un nouveau DIV entre eux:

<div class=row>
    <div class="somediv2"></div>
    <div class="elem"></div>
    <div class="new"></div>
    <div class="elem"></div>
    <div class="somediv3"></div>
    <div class="somediv4"></div>
<div class=row> //and it goes...


$(document).ready( function () {
   if($('.elem').next().hasClass('.elem')) {
       $('<div class="new"></div>').appendTo().prev('.elem');
   } else {
   });
});

InformationsquelleAutor elbatron | 2011-09-14

13

Essayez ceci:
```
$(document).ready( function () {
   $('.elem + .elem').before($('<div class="new"></div>'));
});
```
C'est à l'aide de CSS adjacente sélecteur de frères (+). Il trouve un élément avec la classe .elem avec un autre élément avec la classe .elem précède immédiatement, puis ajoute un nouveau div avant.

Violon: http://jsfiddle.net/4r2k4/
- ok - j'aime votre réponse meilleure que la mienne! jsfiddle.net/mrtsherman/kvg8N/1
- Merci pour les violons. J'ai oublié de mentionner (désolé) que le code html est généré par javascript. Vos codes sont de travail et qui est tout simplement à comprendre sur une page, mais je suppose que parce que le contenu généré ce n'est pas de travail pour moi. Quand je suis à l'aide d'événement click, j'ai simplement ajouter live() pour la fonction, comment faire la même chose dans ce cas?
- Ça fonctionne si je l'attacher à un événement de clic dans le ci-dessus mentionné de l'environnement.
- Je pense que vous pouvez poster une nouvelle question pour obtenir la réponse à l' .vivre une partie. Je pense que la réponse va finir à la recherche de plus comme l'original de votre code et de moins en moins de Matt solution élégante.
- Merci les gars. La branchant en direct d'un événement click est parfait dans mon cas.
InformationsquelleAutor Matt Bradley

La non-jQuery solution:

var divs, str;

divs = document.getElementsByClassName( 'elem' );

[].slice.call( divs ).forEach(function ( div ) {
    str = ' ' + div.nextElementSibling.className + ' ';
    if ( str.indexOf( ' elem ' ) !== -1 ) {
        div.insertAdjacentHTML( 'afterend', ' <div class="new">X</div> ' );
    }
});

Démo Live: http://jsfiddle.net/2MfgB/2/

"Mais Šime, cela ne fonctionne pas avec IE8..." :P

Mise à jour:

Solution Alternative:

var divs = document.querySelectorAll( '.elem + .elem' );

[].slice.call( divs ).forEach(function ( div ) {
    div.insertAdjacentHTML( 'beforebegin', ' <div class="new">X</div> ' );
});

Démo Live: http://jsfiddle.net/2MfgB/3/

InformationsquelleAutor Šime Vidas

Votre code à l'air assez bon pour moi. Ne pas vous suffit de l'envelopper dans un each de sorte qu'il se déclenche à chacun?

$(document).ready( function () {
   $('.elem').each( function() {
     if($(this).next().hasClass('.elem')) {
         $('<div class="new"></div>').appendTo().prev('.places');
     } else {}
   });
});

InformationsquelleAutor mrtsherman

Vous devez vous connecter pour publier un commentaire.