鑑於divs的集合，我怎麼才能確定連續的最後一個

說我有<div><div><div><div><div><div>等，每個div浮動，並有一個固定的寬度。鑑於divs的集合，我怎麼才能確定連續的最後一個

如何以編程方式（使用jquery或其他方式）確定哪些div將在行的末尾（如瀏覽器中呈現的那樣）？

換句話說，呈現在大屏幕上在同一頁：

[ ][ ][ ][ ]<-I want this one 
[ ][ ][ ]<-and this one

和一個小屏幕

[ ][ ]<-I want this one 
[ ][ ]<-and this one 
[ ] etc

來源

2013-02-23 Jack James

迭代它們並比較它們的位置？ – cIph3r 2013-02-23 11:53:09

是否所有'div'都來自同一行？ – 2013-02-23 11:53:12

您可以使用.last()或:last-child選擇。

var lastDiv = $("div").last();

或者：

<div id="container"> 
    <div><div><div><div><div><div> 
</div> 

var lastChild = $("#container:last-child");

http://api.jquery.com/last-child-selector/

來源

2013-02-23 11:52:55

我想他想要確定哪一個元素在任何浮動物落下之前排成一行，而不是容器的最後一個孩子本身。 – Faust 2013-02-23 12:08:44

不認爲我的問題是很清晰，我添加了一個圖來解釋 – 2013-02-23 13:05:20

通過使用jQuery jQuery的，這樣的事情

$("div:last").val();

來源

2013-02-23 11:52:58

試試這個：

HTML：

個

<div>a</div><div>a</div><div>a</div><div>a</div> 
<div>a</div><div>a</div><div>a</div><div>a</div> 
<div>a</div><div>a</div><div>a</div><div>a</div>

JS：

$(window).resize(function(){ 
    var mostRight=null; 

    $("div").each(function(){ 
     var $this = $(this); 
     if (mostRight==null) mostRight=$this; 
     if(mostRight.position().left<$this.position().left){ 
      mostRight=$this; 
      }  

    }); 

    var mostRights=[]; 
    $("div").each(function(){ 
     var $this = $(this); 
     if($this.position().left==mostRight.position().left){ 
      mostRights.push($this); 
     } 
    }); 
    mostRights.push($("div").last()); 

    $("div").css("background-color","white"); 
    for(var i=0;i<mostRights.length;i++){ 
    $(mostRights[i]).css("background-color","red"); 
    } 



});

CSS：

div{ 

    display:inline-block; 
    float:left; 
    width:50px; 
}

這裏看看：

http://jsfiddle.net/bznEx/3/

來源

2013-02-23 12:01:02 cIph3r

只適用於第一行，看到http://jsfiddle.net/bznEx/2/ – 2013-02-23 15:23:47

沒關係，我固定它，有一個look – cIph3r 2013-02-23 15:33:27

基於clph3r的答案，我發現，最簡單的方法來解決這是通過th運行Ë陣列向後：

var prev=-1; 
    $($("#container div").get().reverse()).each(function(){ 
     var $this = $(this) 
     if($this.position().left>prev){ 
      $this.addClass("right"); 
     } 
     prev=$this.position().left; 
});

JSFiddle

來源

2013-02-23 15:52:31

用'$ this.toggleClass（'right'，$ this.position（）。left> prev）'替換if塊。這不僅僅是更簡潔一些，而且通過根據條件切換每個元素，然後可以將其包裝在一個函數中，並在'$（document）.ready（）'和'window .onresize「，以便最右側的塊總是正確標記。我會用這個！（+1） – Faust 2013-02-23 18:53:38

考慮以下片的jQuery：

$(document).ready(function() { 
    var k = Math.floor(($('body').width())/$('div').width()); 
    $('div:nth-child('+k+'n)').each(function() { 
     $(this).css('background-color','blue'); 
    }); 
});

此代碼計算行的最後一個div的索引。然後，它使用nth-child(equation)選擇器，其中equation設置爲k + 'n'，即，選擇索引爲k的倍數的所有div，即，所有div，它們是它們行中的最後一行。

這裏有一個完整的例子，那藍色的油漆全部（原紅）div的最後一列：

<!DOCTYPE html> 
<html> <head> 
<title></title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var k = Math.floor(($('body').width())/$('div').width()); 
    $('div:nth-child('+k+'n)').each(function() { 
     $(this).css('background-color','blue'); 
    }); 
}); 
</script> 
<style> 
div { 
    width: 2em; 
    height: 2em; 
    background-color: red; 
    border-radius: 4px; 
    display: inline-block; 
} 
</style> 
</head> 

<body> 
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 

</body> </html>

來源

2013-02-23 19:29:00 naitoon

哇。這也適用於不同大小的divs嗎？ – 2013-02-24 09:23:45

這是不太可能的，因爲這種方法很大程度上依賴於div的固定寬度**。 – naitoon 2013-02-24 15:05:09

這個問題已經吸引了我具有太大的實際意義。我喜歡OP的自己的答案，但我認爲它可以通過聲明（更直觀地），使用容器上的單個方法鏈完成。所以，我已經煮熟它歸結爲這樣：

$("#container div").each(function() { 
    $(this).toggleClass('rightMost', 
     $(this).is(':last-child') || 
     $(this).position().left >= $(this).next().position().left 
    ); 
});

由於.next()返回空的最後一個元素，你需要具備的條件還通過最後一個元素與.is(':last-child')

此外，由於容器可能僅足夠寬的一個元件 - 在這種情況下，所有應該被標記爲最右 - 噹噹前元素具有位置（）左大於或等於那的.next的（條件應適用）。

你可以看到它的工作和包裹在被兩對文檔的準備和發射的功能可按窗口調整大小位置：http://jsfiddle.net/mhfaust/TdXZJ/

更新的條件，可以更普遍地應用（雖然有點不太優雅）如果期望的效果不僅僅是應用/刪除類名稱，如下所示：

$("#container div").each(function() { 
    if($(this).is(':last-child') || $(this).position().left >= $(this).next().position().left)){ 
     // do one thing... 
    } 

    else{ 
     // ... or do the other. 
    } 
});

來源

2013-02-23 21:39:12 Faust

如果您想要添加一個類以外的其他方法，這種方法仍然可行嗎？ – 2013-02-24 09:27:37

@Jack：沒有通用的'.toggleFunction（）'基於條件應用一個函數或另一個函數，但仍可以使用if塊內的條件（請參閱更新）。還要注意：在jQuery 1.9之前，*有一個重載的toggle（），它使用了2個函數，但是它將它們應用於交替的每個調用序列中，而不是基於條件。 – Faust 2013-02-24 12:39:45

@Jack：想想看，使用prev var來保存索引的解決方案可能比使用'.prev（）'調用更有效得多。 – Faust 2013-02-24 15:27:44

鑑於divs的集合，我怎麼才能確定連續的最後一個

回答

相關問題