Jquery：用<a href="#"> that links to the text of the </a> </li> <li> <a href="#"> it&#39;s wrapping around, but replaces the spaces with hyphens (-)</a> </li>包裹每个<li>

Question

$('h2').each(function() {
    $('UL.chapters_list').append($('<li/>', {text: $(this).text()}))
});

此代码会抓取页面上的所有<H2>标记，然后将其中的每个标记复制到<LI>内的<UL class="chapters_list">内，因此基本上它会创建所有<H2>的列表{1}}代码。

我需要使用锚链接包​​装它创建的每个<LI>标记，此链接应该包含它抓取的<h2>文本，但替换{{1}中的空格连字符<h2>

因此，假设我的脚本在页面上看到2个'-'标记，因此它会抓取这些<H2>标记的文本并将其复制到：

<H2>

我现在需要它用一个锚链接包装每个

标签，锚链接将是LI的文本（或刚刚抓取的H2），但用连字符（ - ）代替空格。

所以上面会变成：

<UL class="chapters_list">
<LI>title number one</LI>
<LI>and number two</LI>
</UL>

有人可以帮忙吗？它应该不会太难，用我提供的代码，谢谢你。

Answer 1

您即将生成无效的HTML。链接必须位于列表元素内。

这有效：

$('h2').each(function() {
    var text = $(this).text();
    $('<li/>')
        .append($('<a />', {text: text, href:'#'+text.replace(/\s/g, '-')}))
        .appendTo('ul.chapters_list');
});

实例：http://jsfiddle.net/mL2HV/

Answer 2

我认为这就是你所追求的：

$('ul.chapters_list li').each(function() { 
    jLi = $(this); 
    jLi.wrap($("<a>").attr('href','#' + jLi.text().replace(/\s/g,'-') )) 
});

Answer 3

除<li>之外的任何其他内容都是<ul>的直接子项，这是不合规的HTML。不同的浏览器可能会以不同的方式处理，根据我的经验，IE尤其不会满意。你应该颠倒顺序，创建一个像这样的结构：

<ul class="chapters_list">
    <li>
       <a href="#title-number-one">title number one</a
    </li>
    <li>
        <a href="#and-number-two">and number two</a>
    </li>
</ul>

你想要像这样做你的js：

$(function() {
    var myUL = $('<ul></ul>');
    $('h2').each(function() {
        var txt = $(this).text();
        var href = txt.replace(/ /g, '-');
        myUL.append('<li><a href="#' + href + '">' + txt + '</a></li>');
    });
    $('body').append(myUL);
});

这将创建一个ul，迭代你<h2>的所有人，为每个人创建一个<li>。它使用简单的正则表达式/ /将<h2>文本中的空格替换为连字符。

这是一个有效的演示：http://www.jsfiddle.net/n3RMh/1/