如何将 div 分离并添加到没有唯一 ID 的父 div

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

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

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

我希望能够使用一个 class。有没有更好的方法或方法？

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

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() method and the attribute starts with select 或

使用 $('[id^="mp_blurb_"]') 将 select 所有 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

How to detach and prependTo a div to a parent div that does not have a unique ID

wordpress

jquery

prepend

getelementsbyclassname