Question

使用分离和前置将子元素从DIV（h4）内移到其父DIV（树上两个DIV）的工作。我拥有的代码正在工作，但是它需要页面上该DIV的每个实例，并将页面上所有多个DIV都添加到每个父DIV的顶部。

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

我意识到，在具有相同ID /类的多个DIV元素的页面上，这将会发生。因此，如何告诉子元素移动到另一个父DIV，但仅相对于其父父，而不必手动为每个子DIV添加唯一ID。

在某些页面上，这些父DIV可能有10-15个以上，我希望不必在每个页面上添加唯一的ID，然后更新我的jQuery。

我希望能够使用一个班级。有更好的方法或方法吗？

尝试了这些资源，但没有帮助

Move a div somewhere else in the dom

How to move an element into another element?

Get class name using 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');
    });

Answer 1

您可以结合使用jQuery's .each()方法和attribute starts with选择器。

使用$('[id^="mp_blurb_"]')将选择ID以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/

如何将div分离并前置到没有唯一ID的父div

1 个答案: