Question

我有以下格式的术语列表（及其说明）。

<dt style="font-weight:bold">A1</dt>
<dd>Some description for A1</dd>

<dt style="font-weight:bold">A2</dt>
<dd>Some description for A2</dd>

<dt style="font-weight:bold">B1</dt>
<dd>Some description for B1</dd>

<dt style="font-weight:bold">C1</dt>
<dd>Some description for C1</dd>

<dt style="font-weight:bold">C2</dt>
<dd>Some description for C2</dd>

<dt style="font-weight:bold">D1</dt>
<dd>Some description for D1</dd>

我需要能够像这样插入锚链接：

<a href="#A"></a>
<dt style="font-weight:bold">A1</dt>
<dd>Some description for A1</dd>

<dt style="font-weight:bold">A2</dt>
<dd>Some description for A2</dd>

<a href="#B"></a>
<dt style="font-weight:bold">B1</dt>
<dd>Some description for B1</dd>

<a href="#C"></a>
<dt style="font-weight:bold">C1</dt>
<dd>Some description for C1</dd>

<dt style="font-weight:bold">C2</dt>
<dd>Some description for C2</dd>

<a href="#D"></a>
<dt style="font-weight:bold">D1</dt>
<dd>Some description for D1</dd>

我只是无法达到这个目的的逻辑。是否有任何方便的jquery功能可以帮助我做到这一点？如果你能引导我使用非常有帮助的逻辑。

更新

该死的！我问的逻辑不是解决方案本身，谢谢你的帮助：）

Answer 1

使用下面的代码

DEMO

 $("dt").each(function () {
   var id =$(this).text()[0];
   if(!$("#"+id).length){
    $(this).before('<a href="#'+id+'" id="'+id+'">'+id+'</a>');
   }
 });

Answer 2

使用dt遍历每个each，并使用before在其前面插入一个锚点。

另外，如果您希望每个锚href只出现一次，您可以创建一个跟踪它们的对象

＆＃13;

var links = {};
$("dt").each(function () {
    var href = "#"+this.innerText[0];
    if (!links[href]) {
    	links[href] = true;
		$(this).before('<a href="'+href+'">'+href+'</a>');
    }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dt style="font-weight:bold">A1</dt>
<dd>Some description for A1</dd>

<dt style="font-weight:bold">A2</dt>
<dd>Some description for A2</dd>

<dt style="font-weight:bold">B1</dt>
<dd>Some description for B1</dd>

<dt style="font-weight:bold">C1</dt>
<dd>Some description for C1</dd>

<dt style="font-weight:bold">C2</dt>
<dd>Some description for C2</dd>

<dt style="font-weight:bold">D1</dt>
<dd>Some description for D1</dd>

＆＃13;

Answer 3

非jQuery

 var dts = $('dt');
    for(var i = 0; i<dts.length; i++)
     {
        var a = document.createElement('a');
        var linkText = document.createTextNode(dts[i].innerHTML);
        a.appendChild(linkText);
        a.href = dts[i].innerHTML[0];
            $('body')[0].insertBefore(a,dts[i]);
     }

Answer 4

编辑：完全错过了小组，因此进行了投票。 = [我的错。看得太快了。更新以修复，即使答案已被接受。

var $dts = $('dt');
var used = [];
// Iterate over each one
$.each($dts,
    function (index, obj) {
        // From each get the first letter on text string
        var text = $(obj).text().substring(0, 1);
        if (used.indexOf(text) == -1) {
            used.push(text)
            // Create an anchor with that text as href
            var newLink = $('<a href="#' + text + '">newlink</a>');
            // Insert the anchor before the element
            $(obj).before(newLink);
        }
    }
)

这是一个工作的小提琴。 http://jsfiddle.net/gyas74d9/2/

根据首字母自动生成链接锚

4 个答案: