Question

我正在努力让我的语法正确，以便在我正在使用的结构的列表项中正确附加一个锚。

我必须附加的结构如下;

CURRENT OUTPUT

<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);
});

非常感谢任何帮助。

谢谢，

d

Answer 1

＆＃13;

$('.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>");
});

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 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>

将锚添加到无序列表中的每个列表项 - Javascript

3 个答案: