jquery - jQuery追加重复内容

Question

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

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

谢谢你的帮助

单击此处查看 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')

您正在选择所有具有类的元素.links并将它们添加到具有类的所有元素.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'); 让 copyOfArray = array.clone().slice();

Answer 5

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

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

从你的小提琴分叉的例子：http: //jsfiddle.net/LMbzY/