動的に変化するid名の取得と、DOM操作

Question

【もとのソース】

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

---

元々、↑のようなソースですが、動的に変化するid名と、それに応じて変化するa要素を取得して、
a要素を複製させ、下２つのdivをwrapしたい。もしくは、div要素の中身のコンテンツをwrapしたいです。

---

【理想】

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

---

現在、↓のようなソースでa要素を複製できたのですが、どうすれば下のdiv要素をwrapできるのでしょうか。
また、divクリックしたときに指定されたページに飛ぶのが目的なのですが、リンクのテキストは必要ないので、文字を表示させないようにする方法も教えていただけないでしょうか。

---

【現在】

var list = [];

$(".Item").each(function() {

list.push($(this).attr('id'));
$(this).children("lead > a").clone().prependTo(this);

});

<a href="https://xxxnet.jp/salon_p/jb_◯◯/">テキストテキスト</a>

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

---

どうぞよろしくお願いします。

Answer 1

なんか、前の質問と似たような感じですね・・・

p.leadの要素が特定できるなら、
$('p.lead').nextAll()で以降の要素が取得できます。
そのdiv要素の中身にaタグを追加します。
そのうえで、追加したa要素を

a.追加したクラス {
  display:block;
  width:100%;
  height:100%;
}
```などと定義すれば、いっぱいに広がります。

Comments

[kinomi]

shi_ueさん
ご回答ありがとうございました。
無事、思い通りに動いてくれました！
感謝いたします。