Inserta un nuevo DIV entre dos DIV que tienen la misma clase y son hermanos inmediatos

Question

Luchando con este por un tiempo. Mi marcado simplificado:

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

Tengo que encontrar una manera de seleccionar todos los DIVs en documento listo que: 1. tiene una clase: elem 2. su próximo DIV también tiene el nombre de clase: elem. Entonces tengo que insertar un nuevo DIV entre ellos:

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

Answer 1

Prueba esto:

$(document).ready(function() { 
    $('.elem + .elem').before($('<div class="new"></div>')); 
}); 

Se trata de utilizar el selector de hermanos adyacentes de CSS (+). Encuentra un elemento con la clase .elem con otro elemento con la clase .elem que lo precede inmediatamente, y luego agrega un nuevo div antes.

violín: http://jsfiddle.net/4r2k4/

Answer 2

Su código se ve muy bien para mí. ¿No necesita envolverlo en un each para que se dispare en cada uno?

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

Answer 3

La solución no jQuery:

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

Demostración en directo:http://jsfiddle.net/2MfgB/2/

"Pero Šime, esto no funciona en IE8 ...":P

---

Actualización:
solución alternativa:

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

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

Demostración en directo:http://jsfiddle.net/2MfgB/3/