在 jquery 的每个选择器循环中移动元素的 dom 位置

Question

所以我有这个 DOM 新闻提要结构

<div class="content">
    <div class="row">
        <h2 class="date">01 July 2015</h2>
        <div class="thumbnail">
            <img src="somesource">
        </div>
        <div class="description">
            <a href="#link">link</a>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est!
       </div>
    </div>
</div>

//duplicated 5 times

我想将 link 移到 h2.date 之前，我的 jQuery 代码如下：

$('.content .row .description').each(function() {
    var hrefs = $('a', this);
    hrefs.insertBefore('.content .row h2.date');
});

它不是只获取 link，而是不断从其他新闻中转储所有 link：

<div class="content">
    <div class="row">
        <a href="#link">link</a>
        <a href="#link2">link from news 2</a>
        <a href="#link3">link from news 3</a>
        <a href="#link4">link from news 4</a>
        <a href="#link5">link from news 5</a>
        <h2 class="date">01 July 2015</h2>
        <div class="thumbnail">
            <img src="somesource">
        </div>
        <div class="description">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A id vero rerum consectetur itaque ex saepe quia nam quam est!
       </div>
    </div>
</div>

知道如何解决这个问题吗？

Answer 1

您的 .insertBefore() 选择器没有上下文，因此您的元素被插入到与您的选择器匹配的第一个元素中：

$('.content .row .description').each(function() {
    var hrefs = $('a', this),
        $target = $(this).closest('.content').find('.row h2.date');
    hrefs.insertBefore($target);
});

JSFiddle

或者，通过循环 .content 来避免必须向上遍历 DOM 树：

$('.content').each(function() {
    var $this = $(this),
        $href = $this.find('a'),
        $target = $this.find('.row h2.date');
    $href.insertBefore($target);
});

JSFiddle

在 jquery 的每个选择器循环中移动元素的 dom 位置

moving the dom position of element in each loop of selector in jquery

each

jquery

dom