jquery - 循环遍历具有唯一类的 div，找到 div 并附加到父 div

Question

我有以下结构：

<div id="camera_wrap">
  <div data-src="Slider-Image-1.jpg" class="test"></div>
  <div class="camera_caption fadeFromBottom">a</div>
  <div data-src="Slider-Image-2.jpg" class="test"></div>
  <div class="camera_caption fadeFromBottom">b</div>
  <div data-src="Slider-Image-3.jpg" class="test"></div>
  <div class="camera_caption fadeFromBottom">c</div>
</div>

我必须将带有 class="camera_caption" 的 div 移动到父 div 中，如下所示：

<div id="camera_wrap">
  <div data-src="Slider-Image-1.jpg" class="test"><div class="camera_caption fadeFromBottom">a</div></div>
  <div data-src="Slider-Image-2.jpg" class="test"><div class="camera_caption fadeFromBottom">b</div></div>
  <div data-src="Slider-Image-3.jpg" class="test"><div class="camera_caption fadeFromBottom">c</div></div>
</div>

我怎样才能做到这一点？

马里奥

Answer 1

使它像这样：

$('[data-src^="Slider-Image"]').each(function () {
    $(this).append($(this).next('.camera_caption').html());
});
$('[data-src^="Slider-Image"]').siblings('.camera_caption').remove();

首先循环通过data-src="Slider-Image"with.each()函数，然后将下一个 div.html()通过.append()，然后在循环之外找到它的兄弟姐妹并将其删除。

在小提琴中查找

Answer 2

$(".camera_caption").each(function(index, element) {
    $(element).prev().html(element);
});

http://jsfiddle.net/fCTr5/1/

哦，那些是兄弟节点而不是父节点；）

Answer 3

你可以用一个循环来做到这一点。jQuery 提供each：

$('.camera_caption').each(function(){
    var o=$(this);
    o.appendTo(o.prev());
});

（prev获取前面的元素，因此这会将每个camera_captiondiv 添加到紧接在它之前的 div 中）

Answer 4

$(".camera_caption").each(function(){
    $(this).prev('.test').append($(this));       
});

之后，编辑我删除了导致元素被完全删除的行。虽然这可行，但如果你想要这样的 html 结构，我仍然建议在生成标记时这样做。

演示