急いでいます！

Jqueryを使ったHTMLの操作

締切済

質問者：ぽんすけぽん
質問日時：2017/01/12 14:06
回答数：3件

Jqueryを利用して
下記の様なリストを作成したいと思っています。

<ul class=“list”>
<li class="item"><img src="/images/slider_01.png" alt=""></li>
<li class="item"><img src="/images/slider_02.png" alt=""></li>
<li class="item"><img src="/images/slider_03.png" alt=""></li>
<li class="item"><img src="/images/slider_04.png" alt=""></li>
<li class="item"><img src="/images/slider_05.png" alt=""></li>
<li class="item"><img src="/images/slider_06.png" alt=""></li>
<li class="item"><img src="/images/slider_07.png" alt=""></li>
</ul>

ただ、imgタグの中身は同ページ内の別の場所に下記の様に記載されており、複数のimgタグを抜き出してul.list > li.item の中に出力する必要があります。

<div class=“roop”>
<p class=“roop_child”><img src="/images/slider_01.png" alt=""></p>
<p class=“roop_child”><img src="/images/slider_02.png" alt=""></p>
<p class=“roop_child”><img src="/images/slider_03.png" alt=""></p>
<p class=“roop_child”><img src="/images/slider_04.png" alt=""></p>
<p class=“roop_child”><img src="/images/slider_05.png" alt=""></p>
<p class=“roop_child”><img src="/images/slider_06.png" alt=""></p>
<p class=“roop_child”><img src="/images/slider_07.png" alt=""></p>
</div>

複数のimgタグを抜き出し、任意要素の中に順番に出力する方法を教えて頂く事はできませんでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： yambejp
回答日時：2017/01/12 16:31

こんな感じじゃないですか？

（受け皿が必要なのでdivをひとつよういしてあります）

<script>
$(function(){
if($('.roop img').length>0){
var ul=$('<ul>').addClass('list').appendTo($('#hoge'));
$('.roop img').each(function(){
$('<li>').addClass('ltem').append($(this).clone()).appendTo(ul);
});
}
});
</script>
<div id="hoge"></div>

<div class="roop">
<p class="roop_child"><img src="/images/slider_01.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_02.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_03.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_04.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_05.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_06.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_07.png" alt=""></p>
</div>

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2017/01/12 15:11

こんにちは

要素の特定がクラスなので、複数存在する場合は全てを対象とするものとして解釈しました。（実際のHTMLでは、要素はひとつなのだと想像しますが…）

<script type="text/javascript">
$(function(){
var ul = $("ul.list").html("");
$("div.roop>p.roop_child>img").each(function(i, e){
$('<li class="item">').append($(e).clone()).appendTo(ul);
});
});
</script>

<ul class="list">
<li>ここに表示される</li>
</ul>

<div class="roop">
<p class="roop_child"><img src="/images/slider_01.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_02.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_03.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_04.png" alt=""></p>
</div>

<div class="roop">
<p class="roop_child"><img src="/images/slider_05.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_06.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_07.png" alt=""></p>
</div>

※ ご提示のHTMLではクラス名のクォーテーションの文字コードが正しくないようですので、ご提示のままのHTMLだと認識されない場合があるようです。

- 0
- 件

通報する

No.1

回答者： naktak
回答日時：2017/01/12 14:38

こういうこと？

<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></s …
<script>
function hoge() {
var ulElem = $("ul.list");
$("p.roop_child").each(function(i, elem) {
var liElem = $('<li class="item">').append($(elem).html());
ulElem.append(liElem);
});
}
</script>
</head>
<body>
<button onclick="hoge()">run</button>
<ul class="list">
</ul>
<div class="roop">
<p class="roop_child"><img src="/images/slider_01.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_02.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_03.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_04.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_05.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_06.png" alt=""></p>
<p class="roop_child"><img src="/images/slider_07.png" alt=""></p>
</div>
</body>
</html>