Question

我在ul中有一系列的li。它们都设置为显示：内联块，用于连续流动。

每当我将鼠标悬停在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

此代码列出了所单击行中的所有li元素。它会根据所点击的top检查每个元素的top。

这是非常笨重的代码。你确定需要这样做吗？

  $("ul li").mouseover(function () {
        var $Clicked = $(this);

        console.log($Clicked.index());

        // previous items in row
        var $Temp = $Clicked;
        while ($Temp.prev().length == 1) 
        {
            $Temp = $Temp.prev();

            if ($Temp.position().top == $Clicked.position().top) {
                console.log($Temp.index());
            }
            else
                break;
        }

        // next items in row
        var $Temp = $Clicked;
        while ($Temp.next().length == 1) 
        {
            $Temp = $Temp.next();

            if ($Temp.position().top == $Clicked.position().top) {
                console.log($Temp.index());
            }
            else
                break;
        }
    });

作为一种更简单的替代方法，您可以迭代所有li元素。匹配top的任何元素都在行中。

Answer 2

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

使用jQuery访问特定行中的其他兄弟

2 个答案: