javascript - li要素の最大幅を取得する方法

Question

例（疑似コード）：

<ul class="menu">
  <li class="extended">
    <div class="columns column1">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
      </ul>
    </div>
  </li>
  <li class="extended">
    <div class="columns column2">
      <ul>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
      </ul>
    </div>
  </li>
</ul>


<ul class="menu">
  <li class="extended">
    <div class="columns column1">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
      </ul>
    </div>
  </li>
  <li class="extended">
    <div class="columns column2">
      <ul>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
        <li>Item 11</li>
      </ul>
    </div>
  </li>
</ul>

そして、目標は次のようになることです。

Item 1 | Item 6
Item 2 | Item 7
Item 3 | Item 8
Item 4 | Item 9
Item 5 | Item 10

また

Item 1 | Item 7
Item 2 | Item 8
Item 3 | Item 9
Item 4 | Item 10
Item 5 | Item 11
Item 6

質問: の最大幅を取得し、結果を追加して次の幅として設定したいcolumn1: column2totalWidth main-wrapper= column1 + column2 $('.main-wrapper').css('width', totalWidth);

私の実装：

var $listing = $(this).find('ul.menu .extended ul li'); 
var $col1, $col2;
// Loop through all target submenu lists
$listing.each(function(key, value) {
   var $t = $(value);
   if(key == 0) {
   // Get the width of the first column
     $col1 = $t.outerWidth(true);
   } else if(key == $listing.length-1) {
     // Get the width of the second column
     $col2 = $t.outerWidth(true);
    }
});
// Store the total width of columns in variable
var $total_width = $col1 + $col2 + 46;  
// Append the width in the parent ul element
$(this).find('ul.menu').css('width', $total_width);

しかし、私のスクリプトは、テキストにスペースがない場合にのみ幅を正しく取得します。

Answer 1

これは信じられないほど奇妙なコードであり、これを行うためのより良い方法を調査する必要があります。それまでの間、私はあなたのコードを JSFiddle に入れて、あなたの $total_width が NaN として戻ってきます - 最初の $col1 と $col2 = 0 を設定する必要があります - これにより、少なくとも数値を取得していることを確認できます。

編集: アレクサンダーは正しい - $().find() は jQuery オブジェクトを返します。私のテストでは、これを削除して $.find() を実行しましたが、.each() 関数はありませんでした。

var $listing = $(this).find('ul.menu .extended ul li'); 
console.log($listing);

var $col1 = 0, $col2 = 0;

// Loop through all target submenu lists
$listing.each(function(key, value) {
   var $t = $(value);

   if(key == 0) {
   // Get the width of the first column

     $col1 = $t.outerWidth(true);
   } else if(key == $listing.length-1) {
     // Get the width of the second column
 $col2 = $t.outerWidth(true);
}
});
// Store the total width of columns in variable
var $total_width = $col1 + $col2 + 46; 

// Append the width in the parent ul element
$(this).find('ul.menu').css('width', $total_width);

それがうまくいくと思います。

Answer 2

CSS に各「列」の幅を決定させ、それらの値を合計することをお勧めします。

.column1 と .column2 はリスト要素 ( display: list-item;) であるため、最大の子アイテムに合わせて拡張されるため、常に同じ幅になります。

参照: http://jsfiddle.net/cWsxZ/1/

それらをに設定するdisplay: inline-block;と、残りは簡単になるはずです。

参照: http://jsfiddle.net/uYW8B/1/

/* css */
li.expanded { display: inline-block; }​

/* js */
var totalWidth = $('.column1').width() + $('.column2').width();
$('.main-wrapper').width(totalWidth);​

Answer 3

ここに私の質問に対する私の解決策があります。すべての入力に感謝します。

(function ($) {

  Drupal.behaviors.menu = {
    attach: function (context, settings) {


      /** SOF Block: Populate the menu items to each columns **/
      var $lists = $('#navigation li.expanded ul.menu'); 

      // Loop through all target lists.
      $lists.each(function(i, e) {

        var $list = $(e);
        // Count all the items
        var $count_list = $(this).find('li').size();
        // Get the ceiling for first column
        var $sliced_list = Math.ceil($count_list / 2);

        if($count_list > 5) {

          //These are temporary variables.
          var $new_list = $('<ul>');
          var $list_item, $sub_list, $sub_set;

          // Set the number of items per column when less than 9
          if($count_list < 9) {
            // The number of items per column.
            var per_column = 5;
          } 

          // Dynamic number of items per column when more that or equal to 9
          if($count_list >= 9) {
            var per_column = $sliced_list;
          }

          // Calculate the amount of columns needed.
          var n = Math.ceil($list.find('li').length / per_column);

          // Loop through all columns.
          for (var i = 0; i < n; ++i) {

            // Creates the sub list for the current column.
            $sub_list = $('<ul class="columns column' + (i + 1) + '">');
            // Gets the first set of list items from the original list and adds them to the sub list created above.
            $sub_set = $list.find('li').slice(0, per_column).appendTo($sub_list);
            // Creates a new list item and adds the sub list to it.
            $list_item = $('<li class="extended extended' + (i + 1) + '">').append($sub_list);
            // Add the newly created list item to the new list.
            $new_list.append($list_item);
            // Create a div with the class 'columnX' and wrap the sub list with it.
            //$sub_list.wrap('<div class="columns column' + (i + 1) + '"></div>');

          }

          // Replace the original list with the new one.
          $list.html($new_list.html());

        }
      }); 
      /** EOF Block: Populate the menu items to each columns **/

      /** SOF Block: Apply all necessary changes to focused menu items **/
      // Set all settings required on hover
      $('#navigation ul li.expanded').hover(function() {
        $(this).children().next('ul').css('display', 'block');
        $(this).addClass('hover'); 
        // Get the width of parent li
        var w = $(this).width();
        // Apply the width to the "div class='fix'" element to avoid overlapping
        $(this).children().next('div').css('width', w + 'px');      
      }, function() {
        $(this).children().next('ul').css('display', 'none');
        $(this).removeClass('hover');
      });
      /** EOF Block: Remove all changes applied to all focused menu items on mouseouot **/    

    }
  };
})(jQuery);