jQueryのフォーム

Question

の内側のdivの内側のdivを選択するには、私はこのコードを持っている：

$(document).ready(function() { 
 
    $form.find() 
 

 
});

#second { 
 
    font-size: 20px; 
 
    color: green; 
 
    background: white; 
 
    text-align: center; 
 
}

<form> 
 
    <div class="first" style="width: 301px; margin:5px 0 0 10px;"> 
 
    <div id="second" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 300px; height: 42px;">Hello</div> 
 
    </div> 
 
</form>

を私はredにbackgroundを変更するために、id="second"でdivを選択します。 find()を使ってこれを行う方法はありますか？

私にとって最も重要なことは、そのidを使用してdivを選択することです。 jsFiddle

Answer 1

$(document).ready(function() { 
 
     $("#second").css("background-color", "red") 
 
    });

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

 
<form> 
 
    <div class="first" style="width: 301px; margin:5px 0 0 10px;"> 
 
    <div id="second" style="font-size:18px; position: absolute; top: 8px; left: 5px; width: 300px; height: 42px;">Hello</div> 
 
    </div> 
 
</form>

あなたは#secondを使って要素を検索し、これを使用して色を変更することができます。必要に応じて、これをclickイベントにバインドするか、またはbackground-colorを変更する方法をバインドすることができます。

そして、あなたは、あなたがこれを行うことがfind()を使用して上の意図している、とあなたが複数の要素を検索したい場合は、あなたが行うことができ、この

$(document).ready(function() { 
 
     $("form").find("#second, #fourth").css("background-color", "red"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="first"> 
 
    <div id="second">Hello</div> 
 
    <div id="third">World</div> 
 
    <div id="fourth">World</div> 
 
    </div> 
 
</form>

あなたはできるだけ多くの要素をターゲットにすることができますカンマを使用して区切ります。

Answer 2

またはフォームの下降として：

$(document).ready(function() { 
    $("form").find("div#second").css('background-color', 'red'); 
}); 

Answer 3

あなたはdivのIDを確信している場合は、事前に、それはおそらく（.find使用して少し冗長になる）あなたは、単にjqueryのセレクタ$("#second")を使用することができますよう。あなたはちょうどあなたが検索は、あなたが検索にフィルタリングする方法（あなたのケースでフォームを）開始したい場所を指定する必要がありますが）（.find使用したい場合は

ので、次のようになります。

$("form").find("#second") 

あなたが.css()にこれを鎖または変数または何でも:)

Answer 4

$(document).ready(function() { 
    $("form").find("div#second").addClass('red'); 
}); 

CSS

にそれを追加することができます

.red{ 
    background-color: red; 
} 

Answer 5

$(document).ready(function() { 
    $("form div").find("div").css('background-color', 'black'); 
});