0

私は自分のサイトのナビゲーションにパンくずを追加するための関数を構築しようとしています。しかし、今は2つの問題があります。1）何らかの理由で、クラム配列は一度に2つのクラムしか保持しません。2）html要素がクラム配列に格納されていても、新しいクラムの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を呼び出すことで、2番目の問題を回避しました（jQueryのサイトでは要素が次のように格納されているため、なぜこれを行う必要があるのか​​わかりませんが：

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

しかし、誰かが一度に2つのパン粉しか保存しない理由を理解するのを手伝ってくれるなら、私は本当に本当に感謝しています。

ありがとう

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 に答える