Question

我有大量的Wordpress帖子，当浏览器低于一定的大小时，我需要将每个帖子中的一个元素移动到另一个元素中（这是设计要求）。

我使用以下内容循环浏览每个帖子，并将元素post-comments移动到post-meta div。

jQuery('.post-entry').each(function(){ // Loop through each post...
  if( jQuery(this).find('.post-meta .post-comments').length == 0 ) {
    jQuery(this).find('.post-extra span.post-comments').appendTo('.post-meta'); // Move categories into the ".post-meta" div
    jQuery(this).find('.post-extra span.post-comments').remove();
  }
});

JSFiddle要遵循，但目前的行为是第一个post-entry工作正常，post-comments元素被移动到post-meta并从原始位置移除，但是其他post-entry div，post-comments元素未从其原始位置移除 - 有人能看出原因吗？

基本上，我需要将post-comments从其原始位置移动到我正在处理的页面上的多个帖子上的名为post-meta的元素中。

Answer 1

移动第一篇文章后，以下检查将始终失败，因为它会检查第一个元素（您已经移动过）：

if( jQuery('.post-entry').find('.post-meta .post-comments').length == 0 )

代替写：

if( $(this).find('.post-meta .post-comments').length == 0 )

因为在$().each()循环内，this引用了结果节点列表的当前元素：

错误：

jQuery('.post-entry').each(function(){ // Loop through each post...
  if( jQuery('.post-entry') // <- does not reference the current element

正确的：

jQuery('.post-entry').each(function(){ // Loop through each post...
  if( $(this) <- always references your current element of the each loop

Answer 2

jQuery('.post-entry').each(function() {
    var $post = jQuery(this),
        $meta = $post.find('.post-meta');

    if ($meta.find('.post-comments').length == 0) {
        $post.find('.post-extra .post-comments').appendTo($meta);
    }
});

这里的不同之处在于，我确保您始终在$(this)内查找和追加。您的长度检查是检查所有.post-entry并且您的appendTo附加到所有 .post-meta，因此第二次迭代循环时，长度检查不会是{{ 1}}。

如果您这样做，那么0 移动时，您根本不需要.remove。

Answer 3

试试这个

jQuery(this).find('.post-extra span.post-comments').parent().remove();

Answer 4

如果删除的元素是“孩子”，您可以尝试：

$('#parentElement').children().remove(); //For all childs

$('#parentElement').children('div').remove(); //For all childs that are divs


$('#parentElement').children('div.classOfDiv').remove(); //For all childs that are Divs with X class

如果children()不起作用。尝试使用next()和closest()。它有时帮助了我。

提供find()（过去给我带来问题）的帮助也可能是这样的：

HTML示例：

<div>
  <ul>
    <li class="class1"></li>
    <button onclick="trigger()">access the li element</button>
  </ul>
</div>

如果你想访问li，你也可以尝试一些奇怪的东西，但有效：

$('this').closest('div').$('.class1').remove();  //When clicking the button, for example

这有时帮助了我，因为closest()找到的元素高于当前位置，而不是位于下方。

我不清楚你在问什么，但也许这对你有所帮助。

我希望它对你有所帮助。祝你好运，让我们知道它是怎么回事！ ;）

remove（）不从同一个类的所有父元素中删除元素

4 个答案: