Как отсоединить и предварительно добавить div к родительскому div, у которого нет уникального идентификатора - PullRequest
Новая
       23

Как отсоединить и предварительно добавить div к родительскому div, у которого нет уникального идентификатора

0 голосов
/ 14 апреля 2019

Работает над перемещением дочернего элемента из DIV (h4) в родительский DIV (два DIV вверх по дереву), используя detach и prepend. Код, который у меня есть, работает, но он берет каждый экземпляр этого DIV на странице и добавляет все несколько DIV на странице в начало каждого родительского DIV. 

jQuery( function($){
$('.mp_m_blurb_1 h4.et_pb_module_header').detach().prependTo('.mp_m_blurb_1 .et_pb_blurb_content');
});

Я понимаю, что на странице с несколькими элементами DIV одного идентификатора / класса это именно то, что должно произойти. Итак, как мне сказать, чтобы дочерний элемент переместился в другой родительский DIV, но только относительно его родителя и без необходимости вручную добавлять уникальный идентификатор для каждого.

На некоторых страницах может быть 10-15+ этих родительских DIV, и я предпочел бы не указывать уникальный идентификатор для каждого из них, а затем обновлять мой jQuery.

Я бы хотел использовать один класс. Есть ли лучший способ или подход?

Пробовал эти ресурсы но они не помогли

Переместить div где-нибудь еще в дом

Как переместить элемент в другой элемент?

Получить имя класса с помощью jQuery

jQuery: appendTo parent

https://www.elated.com/jquery-removing-replacing-moving-elements/

Ниже приведен код, который работал, но, как вы можете видеть, он станет длинным и утомительным. ; -) 

jQuery( function($){
$('#mp_blurb_0 h4.et_pb_module_header').detach().prependTo('#mp_blurb_0 .et_pb_blurb_content');
$('#mp_blurb_1 h4.et_pb_module_header').detach().prependTo('#mp_blurb_1 .et_pb_blurb_content');
$('#mp_blurb_2 h4.et_pb_module_header').detach().prependTo('#mp_blurb_2 .et_pb_blurb_content');
$('#mp_blurb_3 h4.et_pb_module_header').detach().prependTo('#mp_blurb_3 .et_pb_blurb_content');
$('#mp_blurb_4 h4.et_pb_module_header').detach().prependTo('#mp_blurb_4 .et_pb_blurb_content');
$('#mp_blurb_5 h4.et_pb_module_header').detach().prependTo('#mp_blurb_5 .et_pb_blurb_content');
    });

1 Ответ

0 голосов
/ 14 апреля 2019

Вы можете использовать комбинацию метода jQuery .each(), а атрибут начинается с селектора .

Использование $('[id^="mp_blurb_"]') выберет все элементы с идентификаторомначиная с mp_blurp_. 

$('[id^="mp_blurb_"]').each(function() {
    var $this = $(this);
    var $content = $this.find('.et_pb_blurb_content');
    $this.find('h4.et_pb_module_header').detach().prependTo( $content );
});

Смотрите мой рабочий пример здесь: https://jsfiddle.net/z8of7qxp/

...