保持insertAfter元素，在它自己的父元素

-1

它應該重新安排與項目的一些元素，如：日發表，作者，標籤，評論數量低於文章內容，而不是上面。

問題是，在他們多於一篇文章的頁面上（例如：Blog Roll），它會將所有數據（作者/標籤等）插入到每篇文章中，而不是每篇文章中，乘以數據。

例如，假設有兩篇文章。期望的結果是將第一篇文章內的第一篇文章中的發佈日期，作者，標記和評論數移至第二篇文章的相同內容。 jQuery腳本正在這樣做，但它也將第一篇文章數據添加到第二篇文章中，反之亦然。

我該如何使它只在它自己的文章中預先插入/插入？

這是問題的一個小提琴：https://jsfiddle.net/gb14ugja/

香草HTML：

<article id="post-239" class="hentry"> 
    <span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span> 
    <div class="some-title"> 
    Blue Article 
    </div> 
    <div class="entry-meta" style="color:blue"> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
</article> 

<hr/> 

<article id="post-84" class="hentry"> 
    <span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <div class="some-title"> 
    Red Article 
    </div> 
    <div class="entry-meta" style="color:red"> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
</article>

不希望HTML結果：

<article id="post-239" class="hentry"> 
    <div class="some-title"> 
    Blue Article 
    </div> 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
    <div class="entry-meta" style="color:blue"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
    <div class="entry-meta" style="color:red"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
</article> 

<hr> 

<article id="post-84" class="hentry"> 
    <div class="some-title"> 
    Red Article 
    </div> 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
    <div class="entry-meta" style="color:blue"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
    <div class="entry-meta" style="color:red"><span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span><span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
</article>

所需的HTML結果：

<article id="post-239" class="hentry"> 
    <div class="some-title"> 
    Blue Article 
    </div> 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
    <span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span> 
    <div class="entry-meta" style="color:blue"> 
    <span>Article One Author,</span> 
    <span>Article One Tags,</span> 
    <span>Article One Comment Count.</span> 
    </div> 
</article> 

<hr/> 

<article id="post-84" class="hentry"> 
    <div class="some-title"> 
    Red Article 
    </div> 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
    <span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
    <div class="entry-meta" style="color:red"> 
    <span>Article Two Author,</span> 
    <span>Article Two Tags,</span> 
    <span>Article Two Comment Count.</span> 
    </div> 
</article>

編輯：我用更多的數據修改了這個問題，因爲有些人很難理解我遇到的問題。我所包括的小提琴也進行了大修，跳起來會更明顯，因爲問題在於。

此外，每篇文章都分配了一個帶有隨機數的ID。我試圖移動每個文章ID（article[id^='post-*']）的數據，但沒有佔上風。

來源

2017-01-25 Xarcell

你試圖使用.find或.closest方法？ –

提供適當的代碼上下文，你使用這個 – charlietfl

我添加了一個演示問題的小提琴。 – Xarcell

而不是選擇每.entry-meta，你應該首先找到每個.hentry，然後與其後代工作。像

jQuery(".hentry").each(function() { 
    var entryMeta=jQuery(this).find(".entry-meta"); 
    var postedOn=jQuery(this).find(".posted-on"); 
    var entryContent=jQuery(this).find(".entry-content"); 
    //...do whatever you need with them 
});

來源

2017-01-26 01:18:20 Gabriel

我似乎仍然在兩篇文章中的每篇文章中獲取日期.posted-on元素。正在嘗試調試... – Xarcell

我收回它，我根本無法完成它。 – Xarcell

它仍在複製，或將每篇文章中的元素添加到兩篇文章中，而不是每篇文章。 – Xarcell

與在亂七八糟的東西，我假設OP擁有該網站沒有控制，因爲它是一個千篇一律的（混亂？）博客/ CMS模板佈局。那麼什麼是給予，而不是改變什麼，但jQuery的工作，這就是我所做的：

搜索結果排序的內容與任何style="color:red"或style="color:blue".✎

接下來，我們使用.addClass('blue')和引用標籤.addClass('red')到適當的選擇器。

更改目標元素$('.meta-entry')實際的父母$('#post-239)和$('#post-84')。

刪除了.prepend()方法並在其位置添加了.insertBefore()方法。

將insert*方法連接在一起。

SNIPPET

$(document).ready(function() { 
 

 
    // Classify content by the color 
 
    $('[style="red"]').addClass('red'); 
 
    $('[style="blue"]').addClass('blue'); 
 

 
    // Chain methods for readability and performance 
 
    // Used .insertBefore insted of .prepend() 
 
    $("#post-84").insertBefore(".posted-on.red").insertAfter(".entry-content.red"); 
 

 
    // As above 
 
    $("#post-239").insertBefore(".posted-on.blue").insertAfter(".entry-content.blue"); 
 
});

.entry-meta { 
 
    display: inline; 
 
} 
 
.some-title { 
 
    font-weight: bold; 
 
    text-transform: uppercase, 
 
} 
 
hr { 
 
    margin: 16px 0; 
 
    border-style: dashed; 
 
} 
 
span { 
 
    margin-right: 6px; 
 
} 
 
article:first-of-type .some-title { 
 
    color: blue; 
 
} 
 
article:nth-of-type(2) .some-title { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<article id="post-239" class="hentry"> 
 
    <span class="posted-on" style="color:blue">Date Published: 1/25/2017,</span> 
 
    <div class="some-title"> 
 
    Blue Article 
 
    </div> 
 
    <div class="entry-meta" style="color:blue"> 
 
    <span>Article One Author,</span> 
 
    <span>Article One Tags,</span> 
 
    <span>Article One Comment Count.</span> 
 
    </div> 
 
    <p class="entry-content">This is the Blue Article, the red articles content should not be here!</p> 
 
</article> 
 

 
<hr/> 
 

 
<article id="post-84" class="hentry"> 
 
    <span class="posted-on" style="color:red">Date Published: 1/28/2017,</span> 
 
    <div class="some-title"> 
 
    Red Article 
 
    </div> 
 
    <div class="entry-meta" style="color:red"> 
 
    <span>Article Two Author,</span> 
 
    <span>Article Two Tags,</span> 
 
    <span>Article Two Comment Count.</span> 
 
    </div> 
 
    <p class="entry-content">This is the Red Article, the blue articles content should not be here!</p> 
 
</article>

FIDDLE

<iframe width="100%" height="300" src="//jsfiddle.net/zer00ne/pcqm0u2t/embedded/js,html,css,result/dark/?fontColor=FF9900&accentColor=FFCC00&bodyColor=141414&menuColor=010101" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

✎注：相比小提琴由他們style屬性引用的選擇（jQuery的對象）都在不同的片段。

小提琴

$('["red"]') and $('["blue"]')

片段

$('[style="red"]') and $('[style="red"]')

這些選擇目標元素的屬性<div風格>與方括號[]。如果以不同的方式給出，則會記錄錯誤，有時只有一半的文本未呈現。這必須是一個bug，所以不要指望這些屬性選擇器在第一次嘗試時是100％。這通常是選擇應該是什麼樣子：

$('[style="color:red"]') and $('[style="color:blue"]')

閱讀這篇文章上CSS/jQuery (.querySelector() and .querySelectorAll() work like this as well) selectors

來源

2017-01-28 17:10:54 zer00ne

爲了演示目的，我添加了紅色和藍色。有色文本實際上並不存在於工作代碼中。 – Xarcell

@Xarcell我想通了，但你怎麼知道哪一個去哪裏？除了顏色之外，代碼中沒有任何東西可以指定每個項目所屬的位置。 – zer00ne

@Xarcell我看到，也許你忽略了正確呈現問題過程中非常關鍵的一個方面。因爲你的文章是在幾次編輯之後給你的，所以你只給了我們一條途徑，那就是你想在一個區域全部藍色，而在另一個區域全部是藍色。我很清楚這是通過設計來說明你的目標。現在考慮一下你在真實代碼中看到的動態內容中可能是什麼「鉤子」。例如，是否有任何元素具有'data- *'屬性或時間戳或日期？ – zer00ne

保持insertAfter元素，在它自己的父元素

回答

相關問題