どのように私は例えばのためのいくつかの要素の値を設定することができ、私は9 div要素を持っていると私はどのようにjqueryのを使用してこれらのdivの一部にアクセスしたい私は、これはエラーに</p> <p>を与えることを行うことができますどのようにjqueryの

Question

を使用してdiv要素からいくつかの要素を選択することができますここに私の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にアクセスするにはどうすればいいのでしょうか？例：

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

しかし、これはエラーです。どのように私はそれにアクセスできますか？

Answer 1

1. 使用:lt()

説明：マッチしたセット内のインデックスよりも小さいインデックスですべての要素を選択します。あなたの例のdivで

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

それはエラーが発生したので、[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

私のコードを参照してください。私はコードスニペットを追加しています。私は代替divの色を変えるために "Style 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>

私は、これは:-)

おかげ