将锚点附加到无序列表中的每个列表项 - Javascript答案

【问题标题】：Appending an anchor to every list item in an unordered list - Javascript将锚点附加到无序列表中的每个列表项 - Javascript
【发布时间】：2015-08-12 23:18:11
【问题描述】：

我正在努力使我的语法正确，以正确地将锚点附加到具有我正在使用的结构的列表项中。

我必须附加到的结构如下；

电流输出

<ul class="q_circles_holder five_columns no_line">
   <li class="q_circle_outer">
     <a href="/the-potential-centre" target="_self">
        <img src="/test.img">
     </a>
     <div class="q_circle_text_holder">
        <h3 class="q_circle_title" style="">The Header Text</h3>
     </div>
   </li>
</ul>

我需要创建一个函数，该函数将遍历无序列表中的每个列表项并放置一个锚链接（使用已经说明的 href ）所以理想情况下，我想要的输出将是 -

期望的输出

 <ul class="q_circles_holder five_columns no_line">
   <li class="q_circle_outer">
     <a href="/the-potential-centre" target="_self">
        <img src="/test.img">
     </a>
     <div class="q_circle_text_holder">
        <h3 class="q_circle_title" style="">The Header Text</h3>
        <a href="/the-potential-centre" target="_self">Learn More</a> 
     </div>
   </li>
</ul>

我目前有这个，但它不能正常工作

不工作的代码 -

$('.q_circles_holder').find('li').each(function(idx) {
    var $this = $(this),
        str = '<a class="learn-more" target="_self" href="' + $this.find('a').attr('href') + '">Learn More</a>';
    $this.append(str);
});

任何帮助将不胜感激。

谢谢，

【问题讨论】：

标签： javascript jquery html append

【解决方案1】：

$('.q_circles_holder').find('li').each(function() {
  var $this = $(this);
  var href = $this.find('a:eq(0)').attr('href');
  $this.find('h3').after("<a href='"+href+"' target='_self'>Learn More</a>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="q_circles_holder five_columns no_line">
   <li class="q_circle_outer">
     <a href="/the-potential-centre" target="_self">
        <img src="/test.img">
     </a>
     <div class="q_circle_text_holder">
        <h3 class="q_circle_title" style="">The Header Text</h3>
     </div>
   </li>
</ul>

【讨论】：

【解决方案2】：

将$this.append(str) 替换为$this.find('.q_circle_text_holder').append(str)

【讨论】：

【解决方案3】：

我们开始吧。在这里工作小提琴：https://jsfiddle.net/sjpszy4e/.

Javascript

$('.q_circles_holder').find('li').each(function() {
    $(this).append('<a class="learn-more" target="_self" href="' + $(this).find('a').attr('href') + '">Learn More</a>');
});

HTML

<ul class="q_circles_holder five_columns no_line">
   <li class="q_circle_outer">
     <a href="/the-potential-centre" target="_self">
        <img src="/test.img">
     </a>
     <div class="q_circle_text_holder">
        <h3 class="q_circle_title" style="">The Header Text</h3>
     </div>
   </li>
   <li class="q_circle_outer">
     <a href="/the-potential-centre2" target="_self">
        <img src="/test.img">
     </a>
     <div class="q_circle_text_holder">
        <h3 class="q_circle_title" style="">The Header Text 2</h3>
     </div>
   </li>
</ul>

【讨论】：