[英]remove() not removing element from all parent elements of same class
I have a load of Wordpress posts, and when the browser is below a certain size, I need to move one of the elements within each post into another element (this is a design requirement). 我有大量的Wordpress帖子,当浏览器小于某个大小时,我需要将每个帖子中的元素之一移动到另一个元素中(这是设计要求)。
I am using the below to loop through each post, and move the element post-comments
into the post-meta
div. 我正在使用以下内容遍历每个帖子,并将元素
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 to follow, but the current behavior is that the first post-entry
works as fine, and the post-comments
element is moved into post-meta
and removed from its original place, however on the other post-entry
divs, the post-comments
element is not being removed from its original position - can anyone see why? 遵循JSFiddle,但当前的行为是第一个
post-entry
可以正常工作,并且post-comments
元素被移入post-meta
并从其原始位置删除,但是在其他post-entry
div上, post-comments
元素并未从其原始位置移除-有人可以看到原因吗?
Basically, I need to move post-comments
from its original location into an element called post-meta
on multiple posts on the page I am working on. 基本上,我需要将
post-comments
从其原始位置移动到我正在处理的页面上多个帖子上的名为post-meta
的元素中。
After moving the very first post, the following check will always fail, because it checks the first element (which you already moved): 移动第一个帖子后,以下检查将始终失败,因为它会检查第一个元素(您已移动的元素):
if( jQuery('.post-entry').find('.post-meta .post-comments').length == 0 )
instead write: 而是写:
if( $(this).find('.post-meta .post-comments').length == 0 )
because inside a $().each()
loop, this
is referencing the current element of your resulting node list: 因为在
$().each()
循环中, this
引用了结果节点列表的当前元素:
wrong: 错误:
jQuery('.post-entry').each(function(){ // Loop through each post...
if( jQuery('.post-entry') // <- does not reference the current element
correct: 正确:
jQuery('.post-entry').each(function(){ // Loop through each post...
if( $(this) <- always references your current element of the each loop
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);
}
});
The difference here is that I've made sure you're always finding and appending within $(this)
. 此处的区别在于,我已确保您始终在
$(this)
找到并追加。 Your length check was checking all .post-entry
s and your appendTo was appending to all .post-meta
s so the second time it iterated through the loop, the length check would not be 0
. 您的长度检查正在检查所有
.post-entry
,您的appendTo将附加到所有 .post-meta
因此第二次遍历循环时,长度检查将不会为0
。
If you do it this way, you don't need the .remove
at all as the appendTo
moves it. 如果以这种方式进行操作,则在
appendTo
移动它时根本不需要.remove
。
试试这个
jQuery(this).find('.post-extra span.post-comments').parent().remove();
If the removed element is a 'child', you can try this: 如果删除的元素是“孩子”,则可以尝试以下操作:
$('#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
If the children()
doesn't work. 如果
children()
不起作用。 Try play with next()
and closest()
. 尝试与
next()
和closest()
一起玩。 It helped me sometimes. 有时候对我有帮助。
Something that helps also, to supply find()
(that gave me problems in the past), could be this: 提供
find()
(过去给我带来了问题find()
一些帮助也可能是:
HTML EXAMPLE: HTML示例:
<div>
<ul>
<li class="class1"></li>
<button onclick="trigger()">access the li element</button>
</ul>
</div>
If you want to access li
you can also try something strange, but works: 如果您想访问
li
,也可以尝试一些奇怪的方法,但是可以:
$('this').closest('div').$('.class1').remove(); //When clicking the button, for example
This helped me sometimes, because closest()
finds elements above your current location, and not beneath. 有时候这对我有帮助,因为
closest()
在当前位置上方而不是下方查找元素。
I don't have clear what you are asking, but maybe this could help you a bit. 我不清楚您要问的是什么,但这也许可以对您有所帮助。
I hope it helped you. 希望对您有所帮助。 Have good luck and let us know how it goes!
祝您好运,并告诉我们情况如何! ;)
;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.