jquery 在具有相同类且为直接同级的两个DIV之间插入新DIV

7xzttuei  于 2023-06-22  发布在  jQuery
关注(0)|答案(3)|浏览(138)

为此挣扎了一段时间。我的标记简化了:

<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也有类名:然后我需要在它们之间插入一个新的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 {
   });
});
daupos2t

daupos2t1#

试试这个:

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

它使用CSS的相邻兄弟选择器(+)。它找到一个类为.elem的元素,在它前面有另一个类为.elem的元素,然后在它前面添加一个新的div。
小提琴:http://jsfiddle.net/4r2k4/

q3qa4bjr

q3qa4bjr2#

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

  • “But Šime,this doesn't work in 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/

ippsafx7

ippsafx73#

你的代码看起来很不错。难道你不需要把它 Package 在一个each中,这样它就可以在每一个上触发了吗?

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

相关问题