Jquery将第一个链接复制到第二个ul，然后更改第一个链接的类

Jquery to copy first link to second ul and then change class of first link

本文关键字：第一个 链接 然后 第二个 复制 Jquery ul      更新时间：2023-09-26

简短问题：http://jsfiddle.net/wF4FH/2/在我更改类之前，我希望第1页在第2页的正上方，第10页在第20页的正下方。这应该适用于任何数量的元素。

提供的代码给出了一个"Uncaught TypeError:Object#没有方法‘append’"。

长问题：我在找到基于第一个链接插入li元素的正确方法时遇到了问题。问题是我不能在标记上使用id，所以我必须"遍历"每个类并检查名称。我可能会让这件事比实际情况复杂得多，因为我的前两个解决方案并没有像我想象的那样起作用。

html

<ul class="nav">
<li class="active">
    <a href="/">Start</a>
</li>
<li class="has-child">
    <a href="/page1">page1</a>
    <ul class="">
        <li>
            <a href="/page1/page2">page2</a>
        </li>
    </ul>
</li>
<li class="has-child">
<a href="/page10">page10</a>
<ul class="">
    <li>
        <a href="/page10/page20">page20</a>
    </li>
    <li>
        <a href="/page10/page30">page30</a>
    </li>
</ul>
</li>

javascript

 //Copy first link to child ul li 
    var pageLinks = $("li.has-child > a:first-child");
    if (pageLinks != null) {
        //var dropdownMenus = $("li.dropdown  > a:first-child");
        for (var i = 0; i < pageLinks.length; i++) {
            for (var x = 0; x < pageLinks.length; x++) {
                if (pageLinks[i].innerHTML === pageLinks[x].innerHTML) {
                    pageLinks[x].childNodes.append(pageLinks[i]);
                }
            }
        }
    }
    //Change css classes
    $("li.has-child").attr('class', 'dropdown');
    $(".dropdown ul").addClass("dropdown-menu");
    $(".dropdown a").attr("href", "#").addClass("dropdown-toggle").attr('data-toggle', 'dropdown');

强文本在我更改类之前，我希望第1页在第2页的正上方，第10页在第20页的正下方。这应该适用于任何数量的元素。

当它们被复制到内部ul时，我将顶层菜单项更改为另一个类，以作为可点击的下拉菜单项。

提供的代码给出了一个"Uncaught TypeError:Object#没有方法‘append’"。

这是一个cms的导航，我无法更改上面的标记。

试试这个：

$links = $('li.has-child').children('a:first-child');
if($links.length > 0){
    $links.each(function(i,link){
        $(link).next().prepend($('<li></li>').append($(link)))
    })
}

http://jsfiddle.net/wF4FH/6/

您需要.clone（）方法来复制元素。。

更新

$links = $('li.has-child').children('a:first-child');
if($links.length > 0){
    $links.each(function(i,link){
        $(link).next().prepend($('<li></li>').append($(link).clone()))
    })
}

http://jsfiddle.net/wF4FH/7/

当您有一个jQuery对象并通过数字索引访问它时，您只剩下一个HTML元素。所以$('body')[0] == document.body。这意味着，当您访问pageLinks[x]时，您实际上得到了一个原始元素。这意味着您想要的是pageLinks[x].appendChild(pageLinks[i]);，而不是pageLinks[x].childNodes.append(pageLinks[i]);

相关文章：