Question

我已经为8个不同的菜单项重复了以下代码：

<li>
<a> <img class="menu-img" src="bg.jpg"></a>
<div class="sub-container">
<div class="sub-menu"></div>
 </div>

</li>

现在我想将img移动到我用以下代码实现的子容器中：

  $("img.menu-img") //element i'm targetting
    .appendTo(".sub-container"); // where I'm moving it to

但正如您在每次我将其他图片添加到其他菜单时所猜测的那样，它会将其添加到此容器中。如何制作它只是将图像向下移动到该元素的子元素中，以便每个菜单都有一个独特的图像？

感谢。

Answer 1

您可以迭代所有匹配，然后导航分支以查找每个img的目标：

$("img.menu-img").each(function(){

    // Find the closest parent LI element
    var li = $(this).closest('li');

    // Find the container within that LI and move the image (this) under there
    li.find(".sub-container").append(this);
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/95wtuuw9/

在子元素中移动多个元素

1 个答案: