動的に変化するid名を取得して、id名に応じたa要素を複製する

Question

<div class="wrap"> <div class="Item " id="動的に変化"> <div class="title">タイトル</div> <a href="https://xxxnet.jp/salon_p/jb_◯◯/"><img></a>【←idに合わせて動的に変化】 <p></p> <p></p> </div> <div class="Item " id="動的に変化"> <div class="title">タイトル</div> <a href="https://xxxnet.jp/salon_p/jb_◯◯/"><img></a>【←idに合わせて動的に変化】 <p></p> <p></p> </div> <div class="Item " id="動的に変化"> <div class="title">タイトル</div> <a href="https://xxxnet.jp/salon_p/jb_◯◯/"><img></a>【←idに合わせて動的に変化】 <p></p> <p></p> </div> …同じようにしばらく続く </div>

現在、↑のようなソースですが、.Itemの中を、以下のようにjQueryで書き換えたいです。

<div class="Item " id="動的に変化"> <div class="title">タイトル</div> <a href="https://xxxnet.jp/salon_p/jb_◯◯/"><img></a>【←idに合わせて動的に変化】 <a href="https://xxxnet.jp/salon_p/jb_◯◯/"> <p></p> <p></p> </a> </div>

jQueryで動的に変化するid名を取得して、その中のp要素をid名に応じたa要素で囲みたいのですが…
新たにclass名を追加するなど、OKです。
どなたかお力貸していただけないでしょうか。

Answer 1

unauさんの提案（idじゃなくてhrefを取る）があったので、そんな感じでコード化。

$(function(){
  $('.item').each(function(){
    // var href = $(this).children('.title').next().attr('href');
    var href = $(this).children('a').attr('href');
    var chidren = $(this).children('p');
    var last = children.length - 1;

    children.eq(0).html('<a href="' + href + '">' + children.eq(0).html());
    children.eq(last).html(children.eq(last).html() + '</a>');
  });
});
```子要素の`p`が二つの時は、lastを取得しないで`1`と決め打ちしたほうが、きれいですね。
1個の時は考慮してません（笑）

Comments

[unau]

質問者 kinomi さん、div.Item の id がどうしても欲しいというときには、shi_ue さんのコードの中で $(this).attr('id') で取得することができると思います。

[kinomi]

unau さん、
ご回答、ありがとうございます。
大変わかりやすく、感謝しております。
id名を取得する方で、少し進めることができました！

Answer 2

$('div.Item') の id を取得しなくても、$('div.title').next() である a タグと同じ href 属性を持つ a タグで p タグを囲ってしまえばいいのではないでしょうか。

Comments

[kinomi]

なるほど！
ご回答、ありがとうございます。