jquery - 在具有相同类且是直接兄弟的两个 DIV 之间插入新 DIV

Question

现在与这个斗争了一段时间。我的标记简化：

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

我需要找到一种方法来选择准备好的文档上的所有 DIV： 1. 有一个类：elem 2. 他们的下一个 DIV 也有类名：elem。然后我需要在它们之间插入一个新的 DIV：

<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

尝试这个：

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

它使用 CSS 的相邻兄弟选择器 ( +)。它会找到一个带有 class 的元素，.elem而另一个带有 class的元素.elem就在它之前，然后在它之前添加一个新的 div。

小提琴：http: //jsfiddle.net/4r2k4/

Answer 2

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

现场演示：http: //jsfiddle.net/2MfgB/2/

“但是 Šime，这在 IE8 中不起作用……” :P

---

更新：
替代解决方案：

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

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

现场演示：http: //jsfiddle.net/2MfgB/3/

Answer 3

你的代码对我来说看起来不错。难道你不需要把它包起来，each这样它就会在每个人身上触发吗？

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