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

【问题标题】：Insert new DIV between two DIVs that have the same class and are immediate siblings在具有相同类且是直接兄弟的两个 DIV 之间插入新 DIV
【发布时间】：2011-11-17 02:25:23
【问题描述】：

现在在这个问题上挣扎了一段时间。我的标记简化了：

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

【问题讨论】：

标签： jquery find next appendto

【解决方案1】：

试试这个：

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

它使用 CSS 的相邻兄弟选择器 (+)。它会找到一个类为 .elem 的元素与另一个类为 .elem 的元素紧接在其前面，然后在其前面添加一个新的 div。

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

【讨论】：

好的 - 我比我更喜欢你的回答！ jsfiddle.net/mrtsherman/kvg8N/1
感谢您的提琴。我忘了提（抱歉）html 是由 javascript 生成的。您的代码正在运行，只是为了在常规页面上理解，但我想由于生成的内容，这对我不起作用。当我使用点击事件时，我只是将 live() 添加到函数中，在这种情况下如何做类似的事情？
如果我将它附加到上述环境中的点击事件，它就可以工作。
我认为您可能想发布一个新问题以获得 .live 部分的答案。我认为答案最终会看起来更像您的原始代码，而不是像 Matt 的优雅解决方案。
谢谢你们。在我的情况下，附加一个实时点击事件是完美的。

【解决方案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/

【讨论】：

【解决方案3】：

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

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

【讨论】：