jQuery追加重复内容

Question

我是 jquery 的新手。我需要帮助移动内容。我正在使用附加方法。

我希望能够将每个 .links 元素移动到 .node 元素内的每个 .submitted 元素中。现在 append 正在将所有三个 .links 添加到每个 .selected 元素。我在下面提供了代码和指向 JSFiddle 的链接。

感谢您的帮助

Click here to view code in JSFiddle

jQuery

​$('.links').appendTo('.submitted');​​​​​​​​​​​​​​​​​

HTML

<div id="wrapper">
    <div class="node" class="clearfix">
        <h2>Node Title 1</h2>
        <div class="submitted">September 30</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 1 Link 1</a> | 
            <a href="#">Node 1 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 2</h2>
        <div class="submitted">September 29</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 2 Link 1</a> | 
            <a href="#">Node 2 Link 2</a>
        </div>
    </div>

    <div class="node" class="clearfix">
        <h2>Node Title 3</h2>
        <div class="submitted">September 26</div>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
        <div class="links">
            <a href="#">Node 3 Link 1</a> | 
            <a href="#">Node 3 Link 2</a>
        </div>
    </div>
</div>​

CSS

#wrapper { width:600px; margin:0 auto; }
h2 { clear:both; }
.node { border-bottom:1px solid #CCCCCC; }
.submitted { float:left; width:200px; padding:10px; background-color:#CCCCCC; }
.content { float:left; width:360px; padding:10px; }

Answer 1

当你这样做时

$('.links').appendTo('.submitted')

您正在选择 all 类 .links 的元素并将它们添加到 all 类 .submitted 的元素中

编辑

现在我明白你想要什么了:)

这解决了它

$(".links").each(function(){
    $(this).appendTo( $(this).prevAll('.submitted') );
});

在这里看到它的工作：http://jsfiddle.net/RASG/SGgM8/8/

Answer 2

试试下面的。

$('.links').each(function() {
   var $this = $(this);
   $this.appendTo($this.siblings('.submitted'));
})

http://jsfiddle.net/PwJNe/

请注意，您的标记无效，请更改：

<div class="node" class="clearfix">

到：

<div class="node clearfix">

Answer 3

如果我理解正确，你有这个：

<div class="node" class="clearfix">
    <h2>Node Title 3</h2>
    <div class="submitted">September 26</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
    <div class="links">
        <a href="#">Link 1</a> | 
        <a href="#">Link 1</a>
    </div>
</div>

而你希望它以这样的方式结束：

<div class="node" class="clearfix">
    <h2>Node Title 3</h2>
    <div class="submitted">
        September 26
        <a href="#">Link 1</a> | 
        <a href="#">Link 1</a>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin egestas mi, ac luctus orci eleifend pharetra</div>
    <div class="links">
    </div>
</div>

将子元素从 div.links 移动到 div.submitted。

如果那是正确的，那么你可以这样做：

$(".node").each( function() {
     //Get the links
     var links = $(this).children(".links").html();
     //Remove the links from the .links div
     $(this).children(".links").html("");
     //Append the links to the .submitted div
     $(this).children(".submitted").append(links);
});

这将遍历 DOM 中找到的每个 .node 元素。 .each 块内部的 $(this) 指的是 .node 元素。

希望对你有帮助！

Answer 4

**这是使用 Jquery 创建数组副本的方法：**

让数组 = $('li a'); let copyOfArray = array.clone().slice();

Answer 5

三个链接.links被添加到每三个.submitted元素

要仅添加一个，请使用 .first() 或一些 jquery 过滤器进行限制

从您的小提琴中分叉的示例：http://jsfiddle.net/LMbzY/