複数のボックス内にある特定のタグを移動させたい

Question

はじめまして。jQueryで分からないコトがあるので教えてください。

下記のHTMLに対し、
スマホで開いた際はheader__titleとheader__ledeを
.header外へ移動させたいので下記のスクリプトを書きました。

<section id="select01" class="select">
　<div class="header">
　　<p class="header__title">ああああああ</p>
　　<p class="header__lede">ああああああ</p>
　</div>
</section>


<section id="select02" class="select">
　<div class="header">
　　<p class="header__title">いいいいいい</p>
　　<p class="header__lede">いいいいいい</p>
　</div>
</section>

$('#select01 .header__lede').insertAfter('#select01 .header');
$('#select01 .header__title').insertAfter('#select01 .header');

$('#select02 .header__lede').insertAfter('#select02 .header');
$('#select02 .header__title').insertAfter('#select02 .header');

この方法でも上手く表示は出来るのですが、
select02〜1000まで増える可能性があるため、
selectXXに属すheader__titleとheader__ledeを
selectXX内の.headerの後ろに移動させるスクリプトを記述したいのですが、
どのように記述すべきか分からないため有識者の方がいればご教授いただけますか。

ちなみに、
下記を試しましたがうまくいきませんでした。

$('.select .header__lede').insertAfter('.select .header');
$('.select .header__title').insertAfter('.select .header');

Answer 1

class名で決め打ちなら

$(function() {
    $('.select').each(function() {			
        $header_elm = $(this).children(".header");
        $title_elm = $(this).find(".header__title");
        $lede_elm = $(this).find(".header__lede");
        $title_elm.insertAfter($header_elm);
        $lede_elm.insertAfter($header_elm);
    });
});

<div class="header">の中のP要素を全て対象にするなら ```javascript $(function() { $('.select').each(function() { $header_elm = $(this).children(".header"); $header_elm.find("p").each(function() { $(this).insertAfter($header_elm); }); }); }); ``` で、いけると思います。

Comments

[onobeka]

目的が達成されました＾＾
ありがとうございました！

Answer 2

中途半端ですがこんな感じです。
idの数値は、100がありえるなら02ではなく、002などとしておいてください。

var max = 100;
var noLength = 2; // idの数値の長さ(e.g. 99までなら2、999までなら3)
for(var i=0;i<max;i++) {
  var id = '#select' + ('0'.repeat(noLength - 1) + i).substring(-noLength);
  console.log(id);
  $(id + ' .header').after($(id + ' .header > *'));
}

何も考えたくなければ次のようにすればいいです

$('*').map((i, o) => o.id).filter((i, id) => id.match(/select\d+/)!=null).map((i, id) => $("#" + id + ' .header').after($("#" + id + ' .header > *')));