Question

我知道有几十个类似的主题，但我太笨了，我无法从中学到任何东西。换句话说：我的代码只是意思，不适用于在线发布的任何修补程序。 ;）

我的HTML：

<ul id="main_menu">
<li class="menu-item"><a href="#">Link 1</a></li>
<li class="menu-item"><a href="#">Link 2</a></li>
<li class="menu-item"><a href="#">Link 3</a></li>
<li class="menu-item"><a href="#">Link 4</a></li>
</ul>

以及LI应该如何照顾JS的神奇之处：

...
<a href="#" class="roll-link"><span data-title="Link 1">Link 1</span></a>
...

JS / JQ任务：

将class =“roll-link”添加到每个A
在标记
向SPAN添加data-title =“xxx”属性，其值为A（文本与A完全相同）
在结束标记

我的JS尝试：

var menuLis = document.querySelectorAll("ul.main_menu li"); //It's an Array right?

for(var i=0; i<menuLis.length; i++) {
   this.nextChild.setAttribute('class', 'rollink');
   var span = document.createElement('span');
   this.nextChild.nextSibling.insertBefore(span); //Auto-closing </span> may be an issue... 
   span.setAttribute('data-title', hrefvalue[i]); //but how to get value?
}

这可能是完全废话，但我完全没有JS / JQ的经验，只有几个小时的在线基础培训......

感谢您的阅读，感谢您提供帮助。

电贺！

Answer 1

使用jQuery应该很简单（因为你用jQuery标记了它）

jQuery(function ($) {
    $('#main_menu li a').addClass('roll-link').wrapInner(function () {
        return $('<span />', {
            'data-title': $.trim($(this).html())
        });
    })
})

演示：Fiddle

见

要使代码正常工作，首先main_menu是一个id，而不是一个类，所以你需要使用id选择器，然后尝试

var as = document.querySelectorAll("#main_menu li a");

for (var i = 0; i < as.length; i++) {
    as[i].className = 'rollink';
    var span = document.createElement('span');
    span.setAttribute('data-title', as[i].innerHTML);
    span.appendChild(as[i].firstChild);
    as[i].appendChild(span)
}

演示：Fiddle

Answer 2

$('#main_menu > li > a').each(function () {
    var text = $(this).addClass('roll-link').contents().first();
    text.wrap($('<span>').attr('data-title', text.text()));
});

DEMO：http://jsfiddle.net/Bw723/

Answer 3

这是您使用纯Javascript的解决方案。

//get the li elements
var menuLis = document.getElementById("main_menu").getElementsByTagName('li'); 
for(var i=0; i<menuLis.length; i++) {
   menuLis[i].firstChild.setAttribute('class', 'rollink');
   var span = document.createElement('span');
   span.setAttribute('data-title',  menuLis[i].innerHTML);
   //If you want to get href of a then use this one.
   //span.setAttribute('data-title',  menuLis[i].href); 
   //appending the span into a        
   menuLis[i].firstChild.appendChild(span);
}

DEMO

jQuery DOM - 在li中插入多个节点（菜单）

3 个答案: