Question

每当我尝试使用下面的代码移动内容时，都会在目标位置重复出现内容。我面临的问题是，有四个实例具有相同的html结构，但是该页面使用WordPress循环在php中。实际上，它们是最近的四个帖子。我试过：first选择器，但是内容重复了。

如何提取内容并将仅一个实例放置在目标位置？使用css display：none隐藏重复内容的解决方案不是一个好主意。我认为使用jQuery是可行的。

    <div class="target">
    <p>target position</p>
    </div>
    <div class="other">
    <p>Some other content</p>
    </div>
    <div class="one-third">
    <p>content1</p>
    <p>content2</p>
    <p>content3</p>
    </div>
    <div class="one-third">
    <p>content1</p>
    <p>content2</p>
    <p>content3</p>
    </div>
    <div class="one-third">
    <p>content1</p>
    <p>content2</p>
    <p>content3</p>
    </div>


    $(document).ready(function() {
    $('.one-third p:first').insertAfter('.target');
    });

这是jsfiddle的帮助： https://jsfiddle.net/f4skoLv7/6/

Answer 1

提供的代码将起作用。

ping.SendPingAsync

这将仅在目标位置显示一个$(document).ready(function() { $('.one-third p:first').insertAfter('.target'); });。

如果要显示所有内容，请尝试以下代码

content1

DEMO HERE

DEMO TO SHOW ALL DATA

Answer 2

因此，这是对您的问题的两种可能的更正：

如果要从第一个。三分之一div中删除第一个p元素并将其放置在.target元素下，则只需要使用您的jquery代码即可：

1st jan 2012
1st feb 2012
1st march 2012
1st april 2012

如果您只想从第一个。三分之一的div复制第一个p元素放在.target下，则可以使用您的jquery代码执行此操作：

$(document).ready(function() {
  $('.one-third:first p:first-child').insertAfter('.target');
});

希望这会有所帮助！

用jQuery移动时重复的内容

2 个答案: