使用 div 中的文本克隆锚标记链接答案

【问题标题】：Clone anchor tag link with text in div使用 div 中的文本克隆锚标记链接
【发布时间】：2020-07-14 10:49:22
【问题描述】：

$( ".post-title &gt; a" ).clone().prependTo( ".post-text" ).text("View More");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.google.com/">Google</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.yahoo.com/">Yahoo</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.msn.com/">MSN</a> 
</div> 
</div>

我想在 div 中显示具有相同链接的新文本“查看更多”。现在它在同一个 div 中显示所有链接，并带有“查看更多”文本。

【问题讨论】：

不完全清楚你想要达到什么。你能澄清一下吗？你想只显示第一个 div 的链接吗？
您需要为此编写一个显式循环，以便您可以选择 proper .post-text 元素，即您克隆的链接的祖先。

标签： javascript html jquery css wordpress

【解决方案1】：

问题是您将克隆的元素添加到每个 .post-text 元素中。所以每个.post-text 都会有所有克隆的元素。

创建一个贯穿每个 .post-title 元素的函数。

$('.post-title').each(function () {
$(this).find('> a').clone().prependTo($(this).closest('.post-text')).text('View more');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.google.com/">Google</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.yahoo.com/">Yahoo</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.msn.com/">MSN</a> 
</div> 
</div>

【讨论】：

赞成的回答同样认为你比我早。 @SKeurentjes

【解决方案2】：

您必须使用 post-text 类循环并使用 .find() 函数选择嵌套的子元素并应用逻辑。

//$( ".post-title > a" ).clone().prependTo( ".post-text" ).text("View More");



$('.post-text').each(function(i, obj) {
var postTitleElem = $(this).find(".post-title > a");
 console.log(postTitleElem);
  $(postTitleElem).clone().prependTo(this).text("View More");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<div class="post-text" > 
<div class="post-title"> 
<a href="https://www.google.com/" >Google</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.yahoo.com/">Yahoo</a> 
</div> 
</div> 
<div class="post-text"> 
<div class="post-title"> 
<a href="https://www.msn.com/">MSN</a> 
</div> 
</div>

【讨论】：