javascript - 使用 jQuery 访问特定行中的其他同级

Question

我在 ul 中有一系列 li 。并且它们都设置为 display:inline-block 以实现连续流。

Codepen Link here .

每当我将鼠标悬停在 ul 中的任何 li 上时，我都可以获得它的索引值。

我想要什么:我想访问同一行中显示的其他 li 索引值。例如，如果我在索引值为 1 的 li 上，我想访问同一行的索引值 0 , 2, 3 。同时，对于下面的窗口宽度，我只想访问行中索引值0的项目，如下500px，我连续显示两个项目。

HTML

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

CSS:

    ul{
  list-style:none;
}
li{
  width:20%;
  height: 80px;
  background-color: red;
  display:inline-block;
}
@media (max-width:500px){
 li{
      width:40%;
 }
}

JS:

$( "ul li" )
      .mouseover(function() {
        alert($( this ).index());
      })
      .mouseout(function() {

    });

Answer 1

$( "ul li" )
      .mouseover(function() {
  var li=$(this);
  var ul=li.parent('ul');
  var noOflis=$( "ul li" ).length;
  var clickedIndex=li.index();

  var windowWidth=window.innerWidth;
    if(windowWidth>500){
      //var noOfRows=noOflis/4;
      var clickedrow=Math.floor(clickedIndex/4)+1;
      console.log("Clicked row "+clickedrow);
      for(var i=0;i<4;i++){
        var index=((clickedrow-1)*4)+i;
        if(index<noOflis){
          console.log(index);
          //Here you get the index for large screen
        }

      }

    }else{
      //var noOfRows=noOflis/4;
      var clickedrow=Math.floor(clickedIndex/2)+1;
      console.log("Clicked row "+clickedrow);
      for(var i=0;i<2;i++){
        var index=((clickedrow-1)*2)+i;
        if(index<noOflis){
          console.log(index);
          //Here you get the index for small screen
        }

      }
    }

      })
      .mouseout(function() {

    });

请看一下上面的代码。

Here is a link to the Codepen