Q&A
ご回答ありがとうございます。
ご質問内容がわかりにくかったかもしれませんが、「hoge」は連続して複数存在する要素です。
今回は各「hoge」内で処理をしたいので「.each」を使用する必要があると思います。
連続する特定要素の子要素を入れ替えたいです。
具体的には、連続する「hoge」ごとでその内部の「hoge_no」を「hoge_content_box」の前に移動したいです。
■html
lang
1<div class="hoge"> 2 <div class="hoge_content"> 3 <div class="hoge_content_box"> 4 <div class="hoge_content_left"> </div> 5 <div class="hoge_content_right"> 6 <p class="hoge_no"></p> 7 </div> 8 </div> 9 </div> 10</div> 11 12<div class="hoge"> 13 <div class="hoge_content"> 14 <div class="hoge_content_box"> 15 <div class="hoge_content_left"> </div> 16 <div class="hoge_content_right"> 17 <p class="hoge_no"></p> 18 </div> 19 </div> 20 </div> 21</div> 22 23<div class="hoge"> 24 <div class="hoge_content"> 25 <div class="hoge_content_box"> 26 <div class="hoge_content_left"> </div> 27 <div class="hoge_content_right"> 28 <p class="hoge_no"></p> 29 </div> 30 </div> 31 </div> 32</div> 33 34<div class="hoge"> 35 <div class="hoge_content"> 36 <div class="hoge_content_box"> 37 <div class="hoge_content_left"> </div> 38 <div class="hoge_content_right"> 39 <p class="hoge_no"></p> 40 </div> 41 </div> 42 </div> 43</div> 44 45<div class="hoge"> 46 <div class="hoge_content"> 47 <div class="hoge_content_box"> 48 <div class="hoge_content_left"> </div> 49 <div class="hoge_content_right"> 50 <p class="hoge_no"></p> 51 </div> 52 </div> 53 </div> 54</div> 55
諸々調べて以下の記述にたどり着いたのでうまく動作しませんでした。
■js
lang
1$('.hoge').each(function() { 2 var $hoge = $(this); 3 var $hoge_content_box = $hoge.children('.hoge_content_box'); 4 $hoge.find('.hoge_job_no').before($hoge_content_box); 5}); 6
正しい方法をご教授願えれば幸いです。
回答2件
0
自己解決
自己解決しました。
$(".hoge").each(function(){
$(this).find(".hoge_no").insertBefore($(this).find(".hoge_content_box"));
})
投稿2015/11/08 05:30
総合スコア117
0
こんな感じですか？appendToだと後ろに、かprependToだと前につきます。
HTML
1<html> 2<head> 3<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 4</head> 5<body> 6 7 8<div class="hoge"> 9 <div class="hoge_content"> 10 <div class="hoge_content_box"> 11 CONTENT_BOX 12 <div class="hoge_content_left"> </div> 13 <div class="hoge_content_right"> 14 <p class="hoge_no">A</p> 15 </div> 16 </div> 17 </div> 18</div> 19 20<script> 21 $(function() { 22 alert("move"); 23 $( ".hoge_content_right .hoge_no" ).prependTo(".hoge_content_box"); 24 25 }); 26</script> 27 28</body> 29</html>
投稿2015/11/08 04:40
総合スコア1768
失礼いたしました ;-)
.eachの所でなく、子要素の移動の所で躓いておられたのかとその部分だけ抽出してしまいました。
selectorが固定でしたら、以下でもできますね。プログラミングは "There's More Than One Way To Do It." やり方は一つじゃないので楽しいですね。(共同作業では一つの方が良いのかもしれませんが・・・)
$(function() {
alert("move");
$( ".hoge_content_right .hoge_no" ).each(function(){
$(this).prependTo(".hoge_content_box");
});
});
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。