可变范围或选择器问题

任何人都可以帮助解释为什么maxWidth在运行此代码后仍然等于-1？ https://jsfiddle.net/nfy7xboL/注：当我刚刚我们的$("menu-item")代码按预期工作可变范围或选择器问题

我不知道如果我有JavaScript的变量或什么麻烦，但我想如果我设置var menuItem = $("menu-item");和内更换选择一个选择功能，它会输出一样只是运行$("menu-item").each(...

编辑：全脚本文件+ HTML：https://jsfiddle.net/nfy7xboL/7/

HTML

<div class="menu-primary-menu-container"> 
    <ul id="menu-primary-menu" class="menu"> 
     <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-11" style="width: 282px;"><a href="http://192.168.33.10/">Home</a> 

     </li> 
     <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-13" style="width: 282px;"><a href="http://192.168.33.10/hourslocation/">Hours/Location</a> 

     </li> 
     <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14" style="width: 282px;"><a href="http://192.168.33.10/menu/">Menu</a> 

     </li> 
     <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52" style="width: 282px;"><a href="http://192.168.33.10/mooooooooooreeeee/">MOOOOOOOOOOREEEEE</a> 

     </li> 
     <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57" style="width: 282px;"><a href="http://192.168.33.10/more-stuff/">more stuff</a> 

     </li> 
     <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58" style="width: 282px;"><a href="http://192.168.33.10/even/">even</a> 

     </li> 
    </ul> 
</div>

个

var menuItem = $("menu-item"); 
var menuContainer = $(".menu-primary-menu-container"); 
var maxWidth = -1; 

$(window).load(function() { 
    //declare variables 
    var resizeTimer; 

    var count = $(".menu-item").length; 
    console.log(menuItem); 
    // Loop menu items, and retrieve greatest width, to be multiplied by count 
    console.log(menuItem); 
    menuItem.each(function() { 
     maxWidth = Math.max(maxWidth, $(this).width()); 
     console.log(maxWidth); 
    }); 
    console.log(maxWidth); 
    // Only resize li elements if screen width is greater than menu width 
    if ($(window).width() > maxWidth * count) { 
     resize_menu(); 
    } else { 
     // or else show the mobile menu 
     mobile_menu(); 
    }; 
    // On a resize (delayed for performance) 
    $(window).on('resize', function (e) { 
     console.log(maxWidth); 
     //clearTimeout(resizeTimer); 
     //resizeTimer = setTimeout(function() { 
     // again, if window is less than menu, show mobile 
     if ($(window).width() < maxWidth * count) { 
      mobile_menu(); 
     } else { 
      // or else, show regular menu 
      // Note: resize, incase screen was loaded smaller than menu 

      $("#menu-primary-menu").removeAttr('style'); 
      $("#menu-primary-menu").removeAttr('width'); 
      $(".menu-primary-menu-container ul li").css("display", "inline-block"); 
      $(".menu-primary-menu-container ul li a").css("min-height", "70px"); 
      $(".menu-primary-menu-container ul li").css("width", maxWidth); 
      show_menu(); 
     }; 
     //}, 50); 
    }); 

    // if the mobile menu icon is clicked, show menu 
    $("#mobile-menu").click(function() { 
     $("#menu-primary-menu").css("max-width", "960px"); 
     $("#menu-primary-menu").css("margin", "0 auto"); 
     $(".menu-primary-menu-container ul li").css("width", "100%"); 
     $(".menu-primary-menu-container ul li").css("display", "block"); 
     $(".menu-primary-menu-container ul li a").css("min-height", "40px"); 
     show_menu(); 
    }); 
}); 

function resize_menu() { 

    var maxWidth = -1; 

    $(".menu-item").each(function() { 
     maxWidth = maxWidth > $(this).width() ? maxWidth : $(this).width(); 
    }); 

    $(".menu-item").each(function() { 
     $(this).width(maxWidth); 
    }); 
} 

function mobile_menu() { 
    $(".menu-primary-menu-container").css("display", "none"); 
    $("#mobile-menu").css("display", "block"); 
} 

function show_menu() { 
    $("#mobile-menu").css("display", "none"); 
    $(".menu-primary-menu-container").css("display", "initial"); 
}

来源

2015-11-02 Chris

**在'$（“menu-item”）**中缺少'.'类选择器。不需要'load'事件，使用'ready'。请参阅[MCVE] – Tushar

JSFiddle中没有HTML – Sayyid

$（“menu-item”）它是一个选择器，而不是一个属性，您需要修改它，它看起来像这样$（'。menu-item'）或$ '＃menu-item'） –

下面是HTML：

<ul> 
    <li class="menu-item">Text</li> 
    <li class="menu-item">More Text</li> 
    <li class="menu-item">The longest Text</li> 
</ul>

其次CSS代码：

li { display: inline-block; }

最后JS脚本：

menuItem = $(".menu-item"); 
var maxWidth = -1; 

$(document).ready(function() { 
    menuItem.each(function() { 
     maxWidth = Math.max(maxWidth, $(this).width()); 
    }); 

    alert('max width: ' + maxWidth); 
});

另外这里一个jsfiddle：https://jsfiddle.net/nfy7xboL/17/

来源

2015-11-02 06:14:17

当我使用'.ready（）'而不是'。load（）'我得到一个较小的值'maxWidth（）' – Chris

然后使用'$（window）.load（）;'但是这是正在工作的方法。在我发布的jsfiddle上，可以看到它是相同的数量 - 列表项的最大宽度和从$（document）.ready（）'返回的值。 –