Question

我在demo code有一个代码示例，该代码示例以类似流的方式（即display:inline）在ul中显示li元素。

我需要确定显示的complete li个项目的数量，而不用包装ul元素中的每一行。我已经使用jquery在文档就绪事件中为此编写了代码，但是由于它包含包装的li项，因此无法给出正确的结果。

问题：

如何从每行计数的项目中排除包装的li项目？我需要排除包装的li项不在此行或下一行之内，因为它没有完全显示在一行中。

相同的代码示例如下：

<h2>Items per row</h2>
 <div id="mathDiv"> 
  <ul>
     <li>Polynomial</li>
     <li>Binomial Theorem</li>
     <li>Quadratic Equation</li>
     <li>Simple Equation</li>
     <li>Permutations Combinations</li>
     <li>Matrices</li>
     <li>Determinants</li>
     <li>Vectors</li>
     <li>Arithmetic Series</li> 
     <li>Geometric Series</li>
     <li>Binomial nth Term<li>
  </ul>
 </div>

 <div id="msgDiv"></div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 <script>
 $(document).ready(function() {
  //var firstLiTop =  $("li:nth-child(1)").position().top;
  //var fourthLiTop =  $("li:nth-child(4)").position().top;
  //alert("firstLiTop = " + firstLiTop + " , fourthLiTop = " + fourthLiTop);

  var currentTop;
  var itemsInRowCount = 0;
  var currentRow = 0;
  var itemCount = [];

  $("#mathDiv ul li").each(function(index) {
    var liTop = $(this).position().top;
    if(!currentTop) {
       currentTop = liTop;
       currentRow = 0;
   }  

   //alert("currentTop = " + currentTop + " , liTop = " + liTop);

   //row changing logic
   if(currentTop === liTop) {
     itemsInRowCount++;
   } else {//we are in a new row
     currentRow++;
     itemCount.push(itemsInRowCount);//item count for last row
     itemsInRowCount = 1;
   }
   if(index > 0) {
     currentTop = liTop;
   }
  });
  $("#msgDiv").html("Item count for each row are : " + itemCount.join());
 });
 </script>
<style>
div ul {
  display:block;
  border:1px red solid;
  height:170px;
  margin:0;
  padding-left:2px;

}

div ul li {
  display: inline;
  list-style-type:none;
  margin:0;
  margin-right:5px;
  border-bottom:2px solid green;


}

#mathDiv {
  width:340px;
  height:200px;
  border: 1px solid purple;
  display:block;
  padding-left:5px;
  padding-right:5px;
  padding-top:0;
}

#msgDiv {
 color:red;
  margin-top:5px;
}
</style>

Answer 1

我能够从每行计数的项目中排除包装的项目。现在可以使用的更改后的示例位于Working demo sample with changes for wrapped items

我更改了代码段，该代码段决定了是否将新行添加到下面。

我在下面的代码中使用的逻辑是确定一个项目是否被包装是确定新行中第一个项目的左侧，并将其与整个li集合中第一个项目的左侧进行比较；如果它们相等，则上一行中的最后一个项目不包装，否则包装。

   //row changing logic
   if(currentTop === liTop) {
     itemsInRowCount++;
   } else {//we are in a new row
     //if the first item in new row is not left aligned with the first li
     //then we have an item flowing/wrapping into this new row
      if($(this).position().left !== $("li:nth-child(1)").position().left) {
       itemsInRowCount--;
      }

     currentRow++;
     itemCount.push(itemsInRowCount);//item count for last row
     itemsInRowCount = 1;
   }

一定宽度和高度的容器中，每行未包装的项目数

1 个答案: