Question

给出HTML如：

<div>
  <span>Hello</span>
  <p class="selected">Hello Again</p>
  <div class="selected">And Again</div>
  <p>And One Last Time</p>
</div>

和JS如：

$( "div" ).children( ".selected" )[0].css( "color", "blue" ); // this doesn't work

它不会抓取第一个选定的元素。 如何使其有效？

注意：这是一个循环，所以我可以访问var i。

https://jsfiddle.net/kg20avn5/

Answer 1

$( "div" ).children(".selected").first().css( "color", "blue" ); // this works

Answer 2

使用.eq

$("div").children(".selected").eq(0).css("color", "blue");

或

$("div").children(".selected:eq(0)").css("color", "blue");

Answer 3

每个jQuery对象也伪装成一个数组，所以当你使用

时

.children( ".selected" )[0].css( "color", "blue" )

您正在引导jQuery对象并获取本机DOM元素。问题是你正在尝试在它上面使用jQuery方法（.css()），这就是它失败的原因。

要选择jQuery中某些内容的第一个匹配项，您通常会使用.eq(0)，:eq(0)或:first

示例1

＆＃13;

$( "div" ).children( ".selected:first" ).css( "color", "blue" );

＆＃13;

  body {
    font-size: 16px;
    font-weight: bolder;
  }
  p { margin: 5px 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Hello</span>
  <p class="selected">Hello Again</p>
  <div class="selected">And Again</div>
  <p>And One Last Time</p>
</div>

＆＃13;

示例2

＆＃13;

$( "div" ).children( ".selected:eq(0)" ).css( "color", "blue" );

＆＃13;

body {
    font-size: 16px;
    font-weight: bolder;
  }
  p { margin: 5px 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Hello</span>
  <p class="selected">Hello Again</p>
  <div class="selected">And Again</div>
  <p>And One Last Time</p>
</div>

＆＃13;

示例3

＆＃13;

$( "div" ).children( ".selected" ).eq(0).css( "color", "blue" );

＆＃13;

body {
    font-size: 16px;
    font-weight: bolder;
  }
  p { margin: 5px 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Hello</span>
  <p class="selected">Hello Again</p>
  <div class="selected">And Again</div>
  <p>And One Last Time</p>
</div>

＆＃13;

Answer 4

首先，你不能在p标签中添加html标签。通常，您不能在p标签中使用块元素，例如“div”，“p”标签，但是您只能使用“span”，“strong”等内联元素。

如果你试图在你的p标签中使用块元素javascript或jquery会表现得很奇怪。

检查你的html代码语法，你必须得到红线

JQuery：在选定的元素中，选择第n个元素

4 个答案: