.append .prepend 问题

Posted 2023-05-09

【中文标题】.append .prepend 问题

【英文标题】：.append .prepend issue

【发布时间】：2012-12-26 00:14:32

【问题描述】：

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

$("#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>

文本“链接”应该在标签内

这是我在 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);

【问题讨论】：

您正在滥用 prepend 和 append 方法，请参阅 DOC。顺便说一句，jquery API 得到一个 .wrap() 方法。

是的，但我也试过这个，这也是一个好主意，但我找不到这个 .wrap() 的解决方案，也可以在我的代码上工作，除非我知道如何选择里面的文本 标签并包装它我已经尝试过这个但没有用 $("#nashgraphics-menu ul li a.toplevel-a").text().wrap('content content');跨度>

【参考方案1】：

您正在考虑 标记，但在修改页面时您并没有处理标记，而是在处理 DOM 对象。

如果您的目标是将每个#nashgraphics-menu ul li a.toplevel-a 元素放入您描述的结构中，请使用wrap 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>');

...虽然我不能 100% 确定 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>');

...在每个带有 "foo" 类的元素周围放置一个 div 和 "bar" 类。

---

你的评论：

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

好吧，这有点不同：

$("#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>');
);

【讨论】：

您也可以使用 $.replaceWith()，类似以下内容：$('a').replaceWith('<div>blah'+$('a').html()+'</div>');，因为我们正在处理如此复杂的 HTML。似乎有很多麻烦来改变一些标记，我想知道为什么需要它？

是的，我也想过这一点，但我担心我想将文本包装在 标记内，而不是 标记本身

顺便说一句，我在 wordpress 上使用 JQuery，所以它会自动生成列表和 标签，所以我只需要附加和预先添加这些

这真是一个很好的解释，像往常一样 T.J.

@NazareneGonzales：我在最后添加了一点关于你是如何做到这一点的。

【参考方案2】：

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

看看wrap method。

描述：在匹配元素集中的每个元素周围包裹一个 HTML 结构。