jQuery -选择相同的元素并将它们移动到自己的父元素中
jQuery - Select same elements and move them into their own parents
我目前正在做一个基于WordPress的网站。我想使用jQuery来移动博客文章的日期。我无法编辑这个模板,因为它被用在其他页面上了。
确切地说,我想把。entry-time元素移到。entry-title 下面下面是HTML代码:
<div class="post-content-container">
<h2 class="entry-title">Blog 1</h2>
<div class="entry-meta">
<p class="entry-meta-details">
<span class="entry-time">
<span class="updated" style="display:none;">2014-06-24T13:58:52+00:00</span>
<time class="published">June 24th, 2014</time>
</span>
</p>
</div>
<div class="post-content-container">
<h2 class="entry-title">Blog 2</h2>
<div class="entry-meta">
<p class="entry-meta-details">
<span class="entry-time">
<span class="updated" style="display:none;">2014-06-20T13:58:52+00:00</span>
<time class="published">June 20th, 2014</time>
</span>
</p>
</div>
<div class="post-content-container">
<h2 class="entry-title">Blog 3</h2>
<div class="entry-meta">
<p class="entry-meta-details">
<span class="entry-time">
<span class="updated" style="display:none;">2014-05-20T13:58:52+00:00</span>
<time class="published">May 20th, 2014</time>
</span>
</p>
</div>
下面是我目前使用jQuery所做的:
jQuery(".post-content-container").find(".entry-time").each(function(){
jQuery(this).appendTo(".entry-title");
});
元素"。"入门时间"在正确的位置,但我的循环有问题。三个日期显示在每个博客标题下:
https://i.stack.imgur.com/FCA8G.png你能帮我修理这个循环吗?
谢谢,Damien
这是因为您在.appendTo(".entry-title")
中的选择器每次都匹配所有三个条目标题。您需要的是只匹配每个特定.entry-time
的相关标题。为此,一种方法是将DOM导航到正确的目标,例如:
jQuery(".post-content-container").find(".entry-time").each(function(){
var $this = jQuery(this);
$this.appendTo($this.closest(".post-content-container").find(".entry-title"));
});
当然,当你看它之后,它邀请拉动.each
,以便不必遍历DOM多次为同一元素:
jQuery(".post-content-container").each(function() {
var $this = jQuery(this);
$this.find(".entry-time").appendTo($this.find(".entry-title"));
});
我真的更喜欢这个进化的版本:回调的主体读起来非常接近自然语言。
您没有选择与当前项目对应的特定.entry-title
。
jQuery(".post-content-container").find(".entry-time").each(function(){
jQuery(this).appendTo($(this).closest(".entry-meta").prev(".entry-title"));
});
相关文章:
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 将元素移动到右侧,然后返回到左侧
- 将jQuery draggable()元素移动到新的父元素
- Jquery-将图像从一个元素移动到另一个元素
- Css-是否可以在调整屏幕大小时使元素移动,以使其适合屏幕
- 制作元素移动的动画
- 如何将较低的z级元素移动到透明png下方
- SVG文本锚点设置使文本元素移动
- 如何将元素移动到鼠标位置
- d3:应用 scale() 变换时元素移动
- jQuery UI 工具提示在源 DOM 元素移动时卡住打开
- 如何在页面上选择文本块,然后将元素移动到其前面
- 下拉列表使元素移动
- 将一个元素移动到另一个元素中,其余元素将转到第三个位置
- 将最后一个元素移动到数组中的第二个项目的最快方法
- Javascript以可变的角度和速度为元素移动制作动画
- 在 JavaScript 中将数组元素移动到变量
- 使用jQuery单击时将元素移动/复制到另一个位置
- 将排序数组的数组元素移动到具有特殊逻辑的另一个位置
- 如何跟踪元素移动和特定位置的触发功能