我如何使用jQuery

Question

選擇DIV一些元素如何設置爲如一些元素，我有9格的值，我想DIV使用jquery我該怎麼辦，這給了錯誤

訪問某些那些這裏是我的HTML

<div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 

我想循環通過div的某些部分給它一個樣式我如何訪問一個div。例如

var divs = $('div'); 
    for(var x= 3; x < divs.length; x++){ 
     divs[x].css("color", "blue"); 
    } 

但是這給出錯誤。關於我如何訪問它的任何想法？

Answer 1

1. 使用:lt()

說明：小於匹配集內索引的索引在選擇的所有元素。

$('div:lt(3)').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div> 
 
<div>8</div>

Answer 2

var divs = $('div'); 
    for(var x= 3; x < divs.length; x++){ 
     $(divs[x]).css("color", "blue"); 
    } 

在您的例子的div [X]不是一個jquery對象所以它提出錯誤。將它轉換成jquery對象$(divs[x])。

Answer 3

這裏是一個沒有jQuery的解決方案。

var divs = document.getElementsByTagName('DIV'); 
 
var r = 5; 
 
var g = 10; 
 
var b = 15; 
 
for (var i = 0; i < divs.length; i++) { 
 
    divs[i].style.backgroundColor = "rgb(" + r + "," + g + "," + b +")"; 
 
    r += 30; 
 
    g += 50; 
 
    b += 70; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>1</div> 
 
<div>2</div> 
 
<div>3</div> 
 
<div>4</div> 
 
<div>5</div> 
 
<div>6</div> 
 
<div>7</div> 
 
<div>8</div>

我知道你的標籤說jQuery的，但我想展現給你，你可以使用純JavaScript。

Answer 4

試試這個：

var count = 0; 
$("div").each(function(){ 
    if (count>3) { 
     $(this).css("color","red"); 
    } 
    count++; 
}); 

Answer 5

請看看我的代碼。我添加了代碼片段。我點擊了「Style Div」按鈕來改變備用div的顏色。

function styleDiv() 
 
    { 
 
     var divLength = $(".MainDiv div"); 
 
     for (var i = 1; i < divLength.length; i+=2) 
 
     { 
 
      $(divLength[i]).css("color", "blue"); 
 
     } 
 

 
    }

.styleButton 
 
{ 
 
margin-bottom: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="styleButton"> 
 
    <input onclick="styleDiv()" type="button" value="Style Div" /> 
 
</div> 
 

 
<div class="MainDiv"> 
 
    <div>1 div</div> 
 
    <div>2 div</div> 
 
    <div>3 div</div> 
 
    <div>4 div</div> 
 
    <div>5 div</div> 
 
    <div>6 div</div> 
 
    <div>7 div</div> 
 
    <div>8 div</div> 
 
</div>

我希望這有助於:-)

感謝