jQueryを使用して特定の行の他の兄弟にアクセスする

Question

私はulのシリーズを持っています。それらはすべて連続したフローのためにインライン・ブロック表示に設定されています。

Codepen Link here。

私がulのどの肩にでもぶつかると、私はulの索引価値を得ることができます。

私が欲しいもの：他のliのインデックス値にアクセスしたい、同じ行に表示したい。例えば、私がインデックス値1を有するLi上にある場合、同じ行のインデックス値0,2,3にアクセスしたい。同時に、ウィンドウの幅を下にすると、500ピクセル以下のインデックス値0のアイテムのみにアクセスしたいので、2つのアイテムを連続して表示しています。

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

Answer 2

このコードは、すべてのを示していますクリックされた行の0個の要素。クリックされたものの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; 
     } 
    }); 

単純代わりに、あなただけのALL li要素を繰り返すことができます。一致する要素がすべてtopの行にあります。