Creating new jQuery object.create(newobj) 2x 覆盖初始对象

Question

我正在尝试向现有的移动菜单添加新的 <li> 元素，并且此脚本有效，除了第二个 Object.create(x) 覆盖了已经附加的第一个对象。我很困惑为什么会这样。我确定我错过了一些愚蠢的东西。

脚本正在从两个不同的 <a> 标签（即 #c_top-nav-link-01 和 #c_top-nav-link-02 获取文本和 url，并尝试创建新的 <li>带有该信息的标签。

第一个 if 语句生成一个新的 <li> 对象，然后附加到我的目标 <ul>，但是当第二个 if 语句运行时，与使用新属性附加第二个 li 元素相比，它只是替换第一个已经附加的 <li> 元素。

想法？我遗漏了什么明显的东西吗？

    ;(function ( $ ) {
    $( document ).ready( function () {
        $( '.lia-slide-out-nav-menu' ).click( function ( e ) {
            console.log( 'clicked' );
            let mobileNav = $( "ul" ).first();


            const newLI = {
                newNavItem : $( '<li class="some-icon"></li>' ),
                newAnchor  : $( '<a class="some-link" href="#" title="#"></a>' ),
                newIconItem: $( '<span class="circle-icon-left" role="img" aria-label="Category"></span>' ),
                newTextItem: $( '<span class="item-text"></span>' ),
                newNavRight: $( '<span class="chevron-icon-right" role="img" aria-label="click to open this category"></span>' )
            }

            if ( $( "#c_top-nav-link-01" ) ) {

                let firstLI = Object.create( newLI );
                let link01 = $( "#c_top-nav-link-01" );
                link01.text = link01.text();
                link01.url = link01.prop( "href" );
                console.log( 'link01.text', link01.text );
                firstLI.newAnchor.prop( "href", link01.url );
                firstLI.newTextItem.text( link01.text );
                firstLI.newAnchor.append( [firstLI.newIconItem, firstLI.newTextItem, firstLI.newNavRight] );

                firstLI.newNavItem.append( firstLI.newAnchor );
                mobileNav.append( firstLI.newNavItem );
            }

            if ( $( "#c_top-nav-link-02" ) ) {

                let secondLI = Object.create( newLI );
                let link02 = $( "#c_top-nav-link-02" );
                link02.text = link02.text();
                link02.url = link02.prop( "href" );
                console.log( 'link02.text', link02.text );
                secondLI.newAnchor.prop( "href", link02.url );
                secondLI.newTextItem.text( link02.text );
                secondLI.newAnchor.append( [secondLI.newIconItem, secondLI.newTextItem, secondLI.newNavRight] );
                secondLI.newNavItem.append( secondLI.newAnchor );
                mobileNav.append( secondLI.newNavItem );
            }

        } );

    } );
})(jQuery );

目标是一个动态生成的无序列表，我无法利用它并将这些列表项添加到动态生成中，即

<ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>
</ul>

我只想将新的 <li> 项添加到列表中的“第三项”之后

Answer 1

考虑以下因素。

$(function() {
  function newLi(props, target) {
    var item = $("<li>", {
      class: props.class
    });
    if (target != undefined) {
      item.appendTo(target);
    }
    $("<a>", props.link).appendTo(item);
    $("<span>", props.icon).appendTo($("a", item));
    $("<span>", props.text).html(props.text.content).appendTo($("a", item));
    return item;
  }

  $('.lia-slide-out-nav-menu').click(function(e) {
    console.log('clicked');
    var mobileNav = $("ul").first();

    if ($("#c_top-nav-link-01").length) {
      newLi({
        class: "some-icon",
        link: {
          class: "some-link",
          href: $("#c_top-nav-link-01").attr("href"),
          title: "#"
        },
        icon: {
          class: "circle-icon-left",
          role: "img",
          "aria-label": "Category"
        },
        text: {
          class: "item-text",
          content: $("#c_top-nav-link-01").text()
        }
      }, mobileNav);
    }

    if ($("#c_top-nav-link-02").length) {
      newLi({
        class: "some-icon",
        link: {
          class: "some-link",
          href: $("#c_top-nav-link-02").attr("href"),
          title: "#"
        },
        icon: {
          class: "circle-icon-left",
          role: "img",
          "aria-label": "Category"
        },
        text: {
          class: "item-text",
          content: $("#c_top-nav-link-02").text()
        }
      }, mobileNav);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lia-slide-out-nav-menu">...</div>
<div class="slide-out-menu-links">
  <ul>
    <li>item one</li>
    <li>item two</li>
    <li>item three</li>
  </ul>
</div>
<a id="c_top-nav-link-01" href="page1.htm">Link 1</a>
<a id="c_top-nav-link-02" href="page2.htm">Link 2</a>

您还可以使用 .clone() 克隆 a 元素，如下所示：

var newLink = $("#c_top-nav-link-01").clone();

您只需要记住在附加之前调整 ID 属性。

此示例执行类似的功能，但构建了更多结构。如果你愿意，你也可以用 <template> 来做到这一点。它会给你 HTML 结构，然后你可以根据需要复制它并填充它。

您的 if 语句将始终 true 您使用它们的方式。如果要检查具有该选择器的元素是否存在，则需要调用 length 属性。如果不存在元素或 1 或更高，这将 return 0。 0 等同于 false 而 1 或更多等同于 true

Creating new jQuery object.create(newobj) 2x 覆盖初始对象

Creating new jQuery object.create(newobj) 2x overwrites initial object

javascript

jquery

prototype

object