使用jQuery访问Special行中的其他同级

Accessing other siblings in Particular row using jQuery

本文关键字：其他 jQuery 访问 Special 使用      更新时间：2023-09-26

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

此处为Codepen链接。

每当我将鼠标悬停在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() {
    });

$( "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() {
    });

请看一下上面的代码。

这是Codepen 的链接

此代码列出了单击行中的所有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的任何元素都在该行中。

相关文章：