jQuery的foreach循環，多個CSS值？

我想循環.each() css值。我只知道如何獲得索引。 Fiddle jQuery的foreach循環，多個CSS值？

var pos = $('.sublayer_1 div').css('left'); 

    function adjustAttempt3() { 

     $(".sublayer_1 div").each(function (index) { 
      alert(index + ":" + pos); 
     }); 

    }

我打算是節省左值，因爲當瀏覽器是800像素下的jQuery代碼我寫更改的左側位置，當瀏覽器上方800像素大小回的想法，我想再打回來到默認的左值。

僅供參考css不是一個解決方案，因爲左邊的值來自數據庫並且是動態的。

這就是爲什麼我試圖存儲每個左邊的位置並在if語句中使用它。

以下是一些示例html代碼，請查看此fiddle瞭解更多信息。

<div class="sublayer_1"> 
    <div style="position: absolute; left: 100px;">Coffee</div> 
    <div style="position: absolute; left: 300px;">More Coffee</div> 
</div>

側面說明：更多關於我的意思是通過保存原稿左側位置

if((w) > 800) { 
     $Q('#main').css({'margin-top': mar }); 
     $Q('.sublayer_1 div, .sublayer_1 img').css(pos); 
     alert(pos) 
    } 
    else { 
     $Q('.sublayer_1 div, .sublayer_1 img').css({'left': w/2}); 
     $Q('#main').css({'margin-top': w_d + m_d });   
    }

這個if語句被包裹在一個被稱爲在resize函數功能。 if((w) > 800)語句中的變量在獲取默認值的函數之外，而else語句內的變量位於resize函數內，因此它們是動態的。就實踐而言，IDK如何實現這個速度，但它只是對我來說很有用，但我無法獲得每個剩餘的值，這就是爲什麼我會問我上面做了什麼。

來源

2013-08-20 Mike

從['.css'文檔】（http://api.jquery.com/css/）：*「獲取的價值樣式屬性**匹配元素集合中的第一個元素**「* –

什麼？我真的不明白這裏的問題是什麼。你想循環一個元素的CSS屬性？ each（）的每次迭代在哪裏傳遞{left：'100px'}或者什麼？ – SmokeyPHP

我真的不知道你在問什麼。但是你在尋找'this' - 這就是你如何訪問'each'循環中的元素，'$（this）'來訪問jquery擴展元素。 –

我將通過.data存儲原始CSS值每一個元素：

$(".sublayer_1 div").each(function() { 
    $(this).data('origLeft', $(this).css('left')); 
});

如果動態生成HTML，你甚至不必進行此調用，您可以將值直接存儲在HTML中：

<div style="position: absolute; left: 100px;" data-orig-left="100px">Coffee</div>

然後你就可以在以後得到它：

$(".sublayer_1 div").each(function() { 
    var left = $(this).data('origLeft'); 
});

來源

2013-08-20 08:53:08

好吧，這是理解@gvee在上面談論什麼，我喜歡它。這應該很好地結合在一起，並且是一種非常好的方法，可以提供一些靈活性。布拉沃 – Mike

在傳遞給each的函數內使用$(this)來檢索當前元素，然後獲取其left值。

function adjustAttempt3() { 

    $(".sublayer_1 div").each(function (index) { 
     alert(index + ":" + $(this).css("left")); 
    }); 
}

的jsfiddle：http://jsfiddle.net/vGQXT/6/

來源

2013-08-20 08:51:27

在這種情況下，爲什麼不使用'$（this）'而不是'pos.eq（index）'？ –

@FelixKling好點 –

是的，我不知道在那裏使用，老實說，我不知道何時使用'$（this）'。我知道在函數內部使用它，如果你正在嘗試對函數的元素做些什麼（不知道我是否恰當措辭），但我不知道它也有助於循環。 Arun很好地說：「它獲取了滿足選擇器的第一個元素的左值」，這使得$（this）對我來說更好一些，但是我相信它仍然有更多可以用於...... – Mike

當你說var pos = $('.sublayer_1 div').css('left');它獲取第一個元素的left值滿足選擇，你需要的是你的each循環您想要在當前循環元素的位置，所以

應該

function adjustAttempt3() { 
    $(".sublayer_1 div").each(function (index) { 
     var pos = $(this).css('left'); 
     alert(index + ":" + pos); 
    }); 
} 


//Attempt 3 
adjustAttempt3();

演示：Fiddle

來源

2013-08-20 08:51:46

你知道我在嘗試4時做了這樣的事情，除非我沒有使用'$（this ）'。我唯一關心的是如何存儲原始左值，我確定它很容易在這個評論中很難解釋自己，但看看OP有一個調整大小的函數，我需要將默認值存儲在調整大小，這有意義嗎？大聲笑我可以寫這個作爲一個變量，或一個函數，並在我的調整大小功能內傳遞函數？ – Mike

@Mike我認爲FelixKing已經回答了這個問題 –

噢，好吧，我沒有意識到這是兩者的結合，我得到了很多快速的回答，我試圖迴應，並把我的頭圍繞着這一切。我發現他使用'.data'和$（this）'謝謝你回答我的所有問題。我看到你幫了很多忙，謝謝。我想塞滿所有這些信息，並有一天成爲專家:) – Mike

由於您沒有重複獲取，因此您只能獲得left的第一個div位置。

試試這個：

function adjustAttempt3() { 

    $(".sublayer_1").find('div').each(function (index) { 
     var pos = $(this).css('left'); 
     alert(index + ":" + pos); 
    }); 


}

活生生的例子：http://jsfiddle.net/vGQXT/3/

來源

2013-08-20 08:51:50 Alvaro

是的，這是它，類似於Aruns的答案，不知道誰是第一個，但我滾動到底部，可能已經通過了這一點，謝謝。 – Mike

jQuery的foreach循環，多個CSS值？

回答

相關問題