Javascript 如何扩展将徽标移动到多个UL的nav中的脚本

我最近设置了jQuery脚本，将一个徽标移动到主导航的中心，宽度仅在980以上。它在一个无序的列表上非常有效。但是当我在nav中添加几个无序的列表时，它就失控了。我不确定我在这里做错了什么。如果我再添加一个无序列表，我就可以让它工作，但我只能做到这一点

非工作版本：

工作版本：

jQuery：

jQuery(document).ready(function() {

  function addLogoToMiddle() {
    var middle = Math.ceil($(".navbar-nav li").length / 2);
    var logoListItem = $('#logo-wrapper').appendTo('<li id="logo-item"></li>');
    $(".navbar-nav li:nth-child(" + middle + ")").after(logoListItem);
  }

  function addLogoToSide() {
    $('#small-screen-logo').append($('#logo-wrapper'));
    // don't forget to remove the list item element from the navbar
    $('#logo-item').remove();
  }

  $(window).resize(function() {
    if ($(window).width() > 980) {
      addLogoToMiddle();
    } else {
      addLogoToSide();
    }
  });

  $(document).ready(function() {
    if ($(window).width() > 980) {
      addLogoToMiddle();
    }
  });

});

---

html中有一些错误。您需要为顶级列表使用唯一标识符

jQuerydocument.readyfunction{ 函数addLogoMiddle{ var middle=Math.ceil$.test>li.length/2； var logoListItem=$'logo-wrapper'.appendTo； 控制台。中间； $.test>li:n个child+middle+.afterlogoListItem； } 函数addLogoToSide{ $'small-screen-logo'。附加$'logo-wrapper'； //别忘了从导航栏中删除列表项元素 $'logo-item'。删除； } $window.resizefunction{ 如果$window.width>980{ AddLogoMiddle； }否则{ addLogoToSide； } }; $document.readyfunction{ 如果$window.width>980{ AddLogoMiddle； } }; }; 不起作用 -> ->

---

你说得对，html只是一个草率的占位符，我的错。我不得不从wordpress上抄写。不过，你用jQuery一针见血。我在一小时前得到了同样的答案，但忘了重新检查。非常感谢。

jQuery(document).ready(function() {

  function addLogoToMiddle() {
      var middle = Math.ceil($("#main-menu > li").length / 2);
      console.log(middle);
      var logoListItem = jQuery('#logo-wrapper').appendTo('<li id="logo-item"></li>');
      jQuery("#main-menu > li:nth-child(" + middle + ")").after(logoListItem);
  }



  function addLogoToSide() {
      jQuery('#small-screen-logo').append($('#logo-wrapper'));
      // don't forget to remove the list item element from the navbar
      jQuery('#logo-item').remove();
  }


   if (jQuery(window).width() > 980) {
          addLogoToMiddle();
          console.log("+980");
      } else {
          addLogoToSide();
          console.log("-980");
      }





  jQuery(window).resize(function() {
      if (jQuery(window).width() > 980) {
          addLogoToMiddle();
          console.log("+980");
      } else {
          addLogoToSide();
          console.log("-980");
      }

      if (jQuery(window).width() > 980) {
         console.log("+980");
          addLogoToMiddle();

      }
  });