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

时间:2011-09-14 14:34:09

标签: jquery find next appendto

3 个答案:

答案 0 :(得分:13)

试试这个:

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

它使用CSS的相邻兄弟选择器(+)。它找到一个类.elem的元素,另一个元素紧跟在它之前的类.elem,然后在它之前添加一个新的div。

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

答案 1 :(得分:3)

非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/

答案 2 :(得分:2)

您的代码对我来说非常好。你不是只需要将它包裹在each中,以便它在每一个上面发射吗?

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