如何找到孩子ul li a的宽度

Question

我将以下无序列表包裹在 div 中，如下所示

    <div id="menuwrapper">
    <ul>
     <li>home
           <ul>
             <li><a>anchor1</a></li>
             <li><a>anchor2</a></li>
             <li><a>anchor3</a></li>
          </ul>
    </li>

    <li>school</li>
    <li>college</li>
    </ul>  
    </div>

我需要在 home 悬停时找到每个锚点的宽度，即锚点 1、锚点 2、锚点 3 标记宽度。 我有以下似乎不起作用的代码

    $(function () {

      $("#menuwrapper ul li").hover(function () {
      var maxWidth = 0;
      $(this).find("ul li a").each(function () {

          if (this.width > maxWidth)
              maxWidth = this.width;
      });

      $("#menuwrapper ul li ul li a").css("width", maxWidth);
  });
 });

提前感谢您的帮助

Answer 1

$(function() {
    var maxWidth = 0;
    $("#menuwrapper ul li:first-child").hover(function() {
        var $anchors = $(this).find("ul li a");
        $anchors.each(function() {    
            if ($(this).width() > maxWidth) {
                maxWidth = $(this).width();
            }
        });
        $anchors.width(maxWidth);
    });
});

Answer 2

这会让您悬停并设置宽度

$(function () {
    // First we detect and set the widths, then we hide the subMenu
    var $maxWidth = 0,
        $anchors = $("#menuwrapper ul li ul li a");
    $anchors.each(function () {
        var $this = $(this);
        if ($this.width() > $maxWidth)
        {
            $maxWidth = $this.width();
         }
    });
    $anchors.css('width', $maxWidth)
      .closest('ul')
      .hide();

    // Then we add the hover actions
    $("#menuwrapper ul li").hover(
        function()
        {
            $(this).find("ul").slideDown();
        },
        function() {
            $(this).find("ul").slideUp();
        }
    );
});

这可以更好地优化，但我认为这种方式最能解释。

Answer 3

您的$this 应该是$(this)。或者你需要在范围内设置var $this = $(this);。