jQuery选择表单内部的div元素

Question

I have this code:

$(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>

我想选择具有id="second"的

元素，以便将其更改为红色。是否有使用find()实现该目标的解决方案。

对我来说最重要的是使用它的id选择那个

元素。 jsFiddle

- ReshaD

---

不要隐藏你的代码。 - Mad Physicist

Answer 1

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

CSS

.red{
   background-color: red;
}

- user6084460

Answer 2

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

- D Mishra

Answer 3

或者作为表单的后代元素：

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

- KIMB-technologies

Answer 4

为什么不直接这样做呢？

 $(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>

您可以通过使用逗号将它们分开来针对您想要的任意数量的元素进行定位。

- Paul Fitzgerald

---

但是我想通用使用，以便在多个 div 的情况下使用。 - ReshaD

@reshad，请查看更新后的代码。我认为第二段代码片段是你要找的。 - Paul Fitzgerald

Answer 5

如果您已经确定了div id，那么使用.find()可能有些多余，因为您可以直接使用jQuery选择器$("#second")。

但是，如果您想使用.find()，只需指定搜索开始的位置（在这种情况下是表单），以及如何过滤搜索结果。

代码如下：

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

你可以将其链式调用到.css()中，或将其添加到变量中，等等 :)

- Ash