Zugriff auf andere Geschwister in bestimmten Zeile mit jQuery

Question

Ich habe eine Reihe von li in einer ul. und sie alle als Anzeige eingestellt: Inline-Block für einen kontinuierlichen Fluss.

Codepen Link here.

Immer wenn ich über irgendeinen Li in ul schwebe, kann ich den Indexwert davon erhalten.

Was ich will: Ich möchte auf andere li Index Wert zugreifen, in der gleichen Zeile dargestellt. wenn z.B. der Indexwert 1 ist, möchte ich auf den Indexwert 0, 2, 3 derselben Zeile zugreifen. Gleichzeitig möchte ich für die untere Fensterbreite nur auf den Indexwert 0 in der Zeile zugreifen, da unterhalb von 500px zwei Elemente hintereinander angezeigt werden.

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() { 

    }); 

Bitte sehen Sie sich den obigen Code an.

Here is a link to the Codepen

Answer 2

Dieser Code listet alle li Elemente in der Zeile geklickt. Es prüft die 10 jedes Elements gegen die top des einen geklickt.

Es ist wirklich klunky Code. Bist du sicher, dass du das tun musst?

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

Als einfachere Alternative, können Sie einfach alle li Elemente iterieren. Jedes Element mit einem passenden top ist in der Reihe.