Question

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

我希望能够将每个.links元素移动到.node元素中的每个.submitted元素中。现在追加是将所有三个.link添加到每个.selected元素。我在下面提供了代码和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/

jQuery附加重复内容

5 个答案: