Question

var $ vlinks width是returnig zero width

请建议找到vlink宽度的解决方案

这是相关代码：

var $btn = $('nav.greedy button');

  var $vlinks = $('nav.greedy .links');

  var $hlinks = $('nav.greedy .hidden-links');


  var numOfItems = 0;

  var totalSpace = 0;


  var closingTime = 1000;``

  var breakWidths = [];


  $vlinks.children().outerWidth(function(i, w) 
{


    totalSpace += w;

    numOfItems += 1;

    breakWidths.push(totalSpace);
  });

这是我的页面html结构，我希望获得ul li width并存储在breakwidth数组中

 <div class="nav" style="background-color: #f9f9f9;">
        <md-toolbar>
        <div class="md-toolbar-tools">

           <md-button class="md-icon-button" aria-label="Side Panel" ng-click="openSideNavPanel()" hide-gt-xs show-sm id="mobile-side-nav">
              <md-icon class="md-default-theme mobile-side-nav" class="material-icons" style="color:#4bbb85">&#xE5D2;</md-icon>
           </md-button>
           <!-- Logo -->
           <a ng-href="" class="logos">
           <img src="style/img/assets/logo.jpg"> <span class="logo-label-city">Delhi</span>
           </a>
          <span flex></span>
          <!--  <md-button  ng-click="showAdvanced($event)">
              <span style="color: rgba(0,0,0,.6);text-decoration:none">Login</span>
           </md-button> -->
           <a href=""><span style="color: rgba(0,0,0,.6);text-decoration:none;font-size:0.7em">Login</span></a>

           <md-button class="md-icon-button" aria-label="Search" ng-click="searchClick()">

             <md-icon class="material-icons  searchIcon" style="color:#4bbb85; padding-top: 3;">search</md-icon>

           </md-button>
        <div id="searchBox" style="display:none">
          <md-input-container md-no-float class="md-accent" >
                     <input class="inputSearch" ng-model="searchInput" placeholder="Search SoCity" >
                  </md-input-container>
        </div>

        </div>

                    <md-divider class="divider" hide-xs></md-divider>
                   <!--  <div id="fixedTop" hide-xs>
                      <ul class="topnav" id="myTopnav">
                        <li ng-repeat = "interest in interests |limitTo:10" ><a href=""  aria-label="interest.key" ng-click="interest_click($index,interest.key)" md-no-ink id="{{$index}}">{{interest.name}}</a></li>
                         <li><a href="" ng-click="toogleDextopDropDown()"><span>More</style></a>
          <ul id="dextop-dropdown">

                <li ng-repeat = "interest in interests |limitTo:15:10"><a href="" ng-bind="interest.name" aria-label="interest.key" ng-click="interest_click($index +11,interest.key)" md-no-ink id="{{$index +11}}"></a></li></ul></li>
                      </ul>
                    </div> -->
                    <nav class='greedy' id="parent">

  <ul class='links'>
    <li ng-repeat = "interest in interests |limitTo:10" ><a href=""  aria-label="interest.key" ng-click="interest_click($index,interest.key)" md-no-ink id="{{$index}}">{{interest.name}}</a></li>
  </ul>
  <button>More</button>
  <ul class='hidden-links hidden'></ul>
</nav>
        </md-toolbar>
      </div>

谢谢大家

Answer 1

outerWidth(function() { })似乎是根据https://api.jquery.com/outerWidth/

设置宽度

尝试这样做，循环遍历条目：

var $btn = $('nav.greedy button');
var $vlinks = $('nav.greedy .links');
var $vlinkChildren = $vlinks.children();
var $hlinks = $('nav.greedy .hidden-links');
var numOfItems = $vlinkChildren.length;
var totalSpace = 0;
var closingTime = 1000;
var breakWidths = [];
$vlinkChildren.each(function() {
    var width = $(this).outerWidth();
    totalSpace += width;
    breakWidths.push(totalSpace);
});

如果这不能解决问题，您需要提供您正在处理的html结构的示例。

jquery ul的宽度

1 个答案: