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

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

<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 next find appendto
person elbatron    schedule 14.09.2011    source источник

Ответы (3)


arrow_upward
14
arrow_downward

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

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

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

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

person Matt Bradley    schedule 14.09.2011
comment
ладно - твой ответ мне нравится больше, чем мой! jsfiddle.net/mrtsherman/kvg8N/1 - person mrtsherman; 14.09.2011
comment
Спасибо за скрипки. Я забыл упомянуть (извините), что html генерируется javascript. Ваши коды работают, и их просто понять на обычной странице, но я думаю, из-за сгенерированного контента это не работает для меня. Когда я использую событие click, я просто добавляю live() в функцию, как в этом случае сделать что-то подобное? - person elbatron; 14.09.2011
comment
Это работает, если я прикреплю его к событию клика в вышеупомянутой среде. - person elbatron; 14.09.2011
comment
Я думаю, вы можете опубликовать новый вопрос, чтобы получить ответ на часть .live. Я думаю, что ответ будет больше похож на исходный код, чем на элегантное решение Мэтта. - person mrtsherman; 14.09.2011
comment
Спасибо вам, ребята. В моем случае идеально подходит присоединение к событию живого клика. - person elbatron; 14.09.2011

arrow_upward
3
arrow_downward

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

person Šime Vidas    schedule 14.09.2011

arrow_upward
2
arrow_downward

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

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