0

我正在尝试构建一个将面包屑添加到我的网站导航的功能。但是，现在我有两个问题。1) 由于某种原因，crumb 数组一次只能保存 2 个 crumb，并且 2)，即使 html 元素存储在 crumbs 数组中，也只会呈现新的 crumb 的 HTML。另一个面包屑呈现为：

[object HTMLLIElement]

// 脚本

function add_crumb(name) {

    // get current bread crumbs
    var crumbs = $('#breadcrumbs ul li').toArray();

    // no current bread crumbs, so we don't need an arrow image
    if (crumbs.length == 0) {

        var new_crumb = "<li class='crumb' style='display:inline'> " + name + " </li>";

    } else {

        var new_crumb = "<li class='crumb' style='display:inline'><img class='bc_arrow' src='images/icons/breadcrumb_arrow.png' width='19' height='18'> " + name + "</li>";

    }

    // add new bread crumb to array
    crumbs.push(new_crumb);

    // render
    $('#breadcrumbs').html('<ul>' + crumbs.join('') + '</ul>');


}

无论如何，我通过创建一个新的空白数组并在每个元素上调用 .innerHTML 来解决第二个问题（尽管我不明白为什么我必须这样做，因为 jQuery 的网站说元素是这样存储的：

[<li id="foo">, <li id="bar">]

但如果有人能帮我弄清楚为什么它一次只储存两个面包屑，我会非常非常感激。

谢谢

4

2 回答 2

4

HTML 元素对象不是字符串，您不能简单地使用.join. 尝试附加它们。

$('#breadcrumbs').html('<ul />').find("ul").append(crumbs);
于 2012-05-30T14:14:38.063 回答
2

$('#breadcrumbs ul li').toArray();给你一个HTMLLIElements数组。

你应该采取完全不同的方法。不需要任何数组：

if($('#breadcrumbs ul li').length){
    $('#breadcrumbs ul').append(
      "<li class='crumb' style='display:inline'>"
        + name +
      "</li>");
}else{
    $('#breadcrumbs ul').append(
      "<li class='crumb' style='display:inline'>"
        + "<img class='bc_arrow' src='images/icons/breadcrumb_arrow.png' width='19' height='18'>" +
        + name + 
      "</li>");
}
于 2012-05-30T14:15:49.783 回答