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

您可以通过循环执行此操作。 jQuery提供each：

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

（prev获取前面的元素，因此这会将每个camera_caption div添加到紧邻它之前的div中。

Answer 2

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

之后，编辑我删除了导致元素被完全删除的行。虽然这有效，但我仍然建议在生成标记时执行此操作，如果您需要这样的html结构。

DEMO

Answer 3

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

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

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

Answer 4

像这样：

$('[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"函数遍历.each()，然后将下一个div .html()放到.append()，然后在循环外找到它的兄弟并将其删除

使用唯一类循环遍历div，找到div并附加到父div

4 个答案:

FIND IN FIDDLE