Question

我无法找到解决此问题的方法。我有Wordpress的这个ul-menu输出：

<ul class="menu">
    <li>
        <a href="#">Page 1</a>
    </li>
    <li>
        <a href="#">Page 2</a>
    </li>
</ul>

但我希望最终结果是这样的 - 克隆并附加锚点并在下面放置一个克隆：

<ul class="menu">
    <li>
        <a href="#">Page 1</a>
        <a href="#">Page 1</a>
    </li>
    <li>
        <a href="#">Page 2</a>
        <a href="#">Page 2</a>
    </li>
</ul>

我使用过jQuery - 但是我在2小时的试错中根本没有运气。这是我能得到的尽可能接近。但这是错误的。

/*jQuery*/
$('.menu li a:first-child').eq(0).clone().insertAfter('.menu li a:first-child');

在这里小提琴：http://jsfiddle.net/67jXz/1/

Answer 1

你不应该.eq(0);将其限制为匹配的第一个a元素，以便在每个后续a之后克隆并插入，从而生成“Page 1”的副本。

相反，您需要通过迭代.each()来执行克隆并插入每个单独的元素，如下所示：

$('.menu li a:first-child').each(function() {
    $(this).clone().insertAfter(this);
});

请注意，.insertAfter(this)部分是指在.menu li a:first-child选择器匹配的原始元素之后插入克隆元素;引用匹配元素的this中的$(this)相同。

Updated fiddle

Answer 2

试试这段代码：

$(function(){
  $('.menu li a:first-child').each(function(k,v){
    $(v).clone().insertAfter(v);
  });
});

jsfiddle

jQuery选择器和智能方式的克隆

2 个答案: