jquery - 如何单独包装由 jQuery html() 函数打印的对象

Question

您可以在这里查看我的代码:

$(document).ready(function(){
    var anchor_navigation_content = $('#content h1').text();
    $('#anchor-navigation').html(anchor_navigation_content);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="anchor-navigation"></div>
<div id="content">
    <h1>Test1</h1>
    <h1>Test2</h1>
</div>

我正在尝试创建一个根据我的 #content 中出现的每个 H1 标签自动生成的导航。每个元素都应该用 a 标签单独包装。但是，我的代码将所有元素包装在一个标签中。我不知道如何克服这个问题。谁能解释一下吗？

Answer 1

您需要.each()

$('#content h1').each(function () {
    $('#anchor-navigation').append("<a href='#'>" + $(this).text() + "</a>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="anchor-navigation"></div>
<div id="content">
     <h1>Test1</h1>
     <h1>Test2</h1>
</div>

.each() 将循环遍历 #content 中的每个 h1，用 a 包裹每个 h1 的文本，并使用 将其附加到 #anchor-navigation。追加()

• http://api.jquery.com/each/