Вставьте новый DIV между двумя DIV, которые имеют один и тот же класс и являются непосредственными братьями и сестрами - PullRequest
Новая
       31

Вставьте новый DIV между двумя DIV, которые имеют один и тот же класс и являются непосредственными братьями и сестрами

6 голосов
/ 14 сентября 2011

Бороться с этим некоторое время сейчас. Моя разметка упрощена: 

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

Ответы [ 3 ]

13 голосов
/ 14 сентября 2011

Попробуйте это: 

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

Используется соседний селекторный элемент CSS (+). Он находит элемент с классом .elem с другим элементом с классом .elem, непосредственно предшествующим ему, затем добавляет новый div перед ним.

Скрипка: http://jsfiddle.net/4r2k4/

3 голосов
/ 14 сентября 2011

Решение не-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/

«Но Шиме, это не работает в 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 голосов
/ 14 сентября 2011

Ваш код выглядит довольно хорошо для меня.Разве вам не нужно просто обернуть его в each, чтобы оно срабатывало на каждом? 

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