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

You need .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() will loop through every h1 inside #content, wrap text of each h1 with a and append it to #anchor-navigation with .append()

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

Answer 2

wrapInner会处理它，无论如何你都不应该h1用 an包装a。包装它的内容。

$(document).ready(function(){
    $('#anchor-navigation').html($('#content h1').clone().wrapInner("<a href='#'></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>