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>

我需要在家里悬停时找到每个锚点的宽度，即anchor1，anchor2，anchor3标签宽度。我有以下代码似乎无法正常工作

    $(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

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

Answer 3

这是你的悬停和设置宽度

$(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();
        }
    );
});

这可以更好地进行优化，但我认为这种方式最具说明性。

如何找到孩子的宽度

3 个答案: