.append .prepend问题

Question

嗨，我在使用.append .prepend方法JQuery时遇到了问题，我非常了解这些方法，但是当我尝试这样的代码时，出现了一个奇怪的故障：

$("#nashgraphics-menu ul li a.toplevel-a")
 .prepend('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1>');
$("#nashgraphics-menu ul li a.toplevel-a")
 .append('</h1></span><span class="main-navigation-dropdown-button-right"></span>');

它应该正常工作，但不幸的是它没有，我想知道为什么

注意:我说的是“链接”文本，这些标签应该包装文本，但它不是

代码应该输出以下内容：

<span class="main-navigation-button-left"></span>
<span class="main-navigation-button-body"><h1>Link</h1></span>
<span class="main-navigation-dropdown-button-right"></span>

但事情是这样的：

<span class="main-navigation-button-left"></span>
<span class="main-navigation-button-body"><h1></h1></span>Link<span class="main-navigation-dropdown-button-right"></span>

文本"Link“应该在标记中

，这里是我为Wordpress使用的全部代码，顺便说一句，

;(function($){
$.fn.nashgraphics_menu = function(){
    $("#nashgraphics-menu ul li").each(function(index){
        $('#nashgraphics-menu ul li').addClass('toplevel-nochild');
        $('#nashgraphics-menu ul li ul li').removeClass('toplevel-nochild').addClass('nochild');
        $('#nashgraphics-menu ul li:has(ul)').removeClass('toplevel-nochild nochild').addClass('toplevel');
        $('#nashgraphics-menu ul li ul li:has(ul)').removeClass('toplevel nochild').addClass('haschild');

        $('#nashgraphics-menu ul li a').addClass('toplevel-nochild-a');
        $('#nashgraphics-menu ul li ul li a').removeClass('toplevel-nochild-a').addClass('nochild-a');
        $('#nashgraphics-menu ul li:has(ul) > a').removeClass('toplevel-nochild-a nochild-a').addClass('toplevel-a');
        $('#nashgraphics-menu ul li ul li:has(ul) > a').removeClass('toplevel-a nochild-a').addClass('haschild-a');
    });

    $("#nashgraphics-menu ul li a.toplevel-a").prepend('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1>');
    $("#nashgraphics-menu ul li a.toplevel-a").append('</h1></span><span class="main-navigation-dropdown-button-right"></span>');

    $('#nashgraphics-menu ul li a.haschild-a').append('&nbsp; &raquo;');
};

)(JQuery)；

Answer 1

您考虑的是标记，但在修改页面时，您不是在处理标记，而是在处理DOM对象。

如果您的目标是将每个#nashgraphics-menu ul li a.toplevel-a元素放入您所描述的结构中，请使用 function

$("#nashgraphics-menu ul li a.toplevel-a").wrap('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1></h1></span><span class="main-navigation-dropdown-button-right"></span>');

...although，我不能百分之百肯定wrap能处理这样复杂的结构。您可能需要分别创建结构，如下所示：

$("#nashgraphics-menu ul li a.toplevel-a").each(function() {
    var $a = $(this),
        $wrapper;

    // Create the wrapper
    $wrapper = $('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1></h1></span><span class="main-navigation-dropdown-button-right"></span>');

    // Insert it prior to the anchor
    $wrapper.insertBefore($a);

    // Move the anchor into the `h1`
    $wrapper.find('h1').append($a);
});

为了便于参考，给出一个不太复杂的wrap示例，如下所示：

$(".foo").wrap('<div class="bar"></div>');

...puts是一个具有类"bar"的div，每个元素周围都有类"foo"。

关于你的评论：

是的，我也考虑过这一点，但我担心的是，我想要将文本包装在标签中，而不是标签本身。

好吧，那有点不同：

$("#nashgraphics-menu ul li a.toplevel-a").each(function() {
    var $a = $(this);

    $a.html('<span class="main-navigation-button-left"></span><span class="main-navigation-button-body"><h1>' + $a.html() + '</h1></span><span class="main-navigation-dropdown-button-right"></span>');
});

Answer 2

可能是浏览器或jQuery添加了结束标记以生成有效的prepend，因为由于执行了prepend，在执行append之前它将是无效的。

看看 method。

描述:在匹配的元素集合中围绕每个元素包装一个HTML结构。