代码之家 › 专栏 › 技术社区 › qnoid

如何访问第一个子选择器返回的每个元素

jquery

qnoid · 技术社区 · 15 年前

假设以下选择器

$("div span:first-child")

厕所, 卡尔,

   </div>
   <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>

as seen on jquery doc

是否有方法引用返回的“每个”元素?

我似乎无法使用 ( .size() 返回0)

更新: 你是对的,有一些不同的东西,我错过了一些原因,但我没有想到,这可能是一个问题,而阅读文档。

看来 第一个孩子 选择器仅在元素实际为这个第一个孩子,而不仅仅是第一次发生。

例如

   <div>
    <h1>Names</h1>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>    
   </div>
   <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>

这是“特征”吗?有没有其他选择第一个孩子的方法((基于事件)

4 回复 | 直到 15 年前

Nick Craver 15 年前

新问题更新: <div> 这个第一个孩子。

$("div").find("span:first").each(function() {
    alert("This is child #" + $(this).index() + " in this section: " + $(this).text());
});

You can see a demo here

你可以用 .each() 做你想做的事,像这样:

$("div span:first-child").each(function() {
  alert("This is child #" + $(this).index() + " in this section: " + $(this).text());
});

You can test it out here .

为此:

我似乎无法使用.each()(.size()返回0)遍历它们

在那里必须

Kai 15 年前

$("div span:first-child").each(function(){
           alert($(this).text());}
     );

Demo

或者,

var spans=$("div span:first-child");
$.each(spans, function(index, sp) {
alert(index + ' - ' +$(sp).text());
});

Demo2

Anurag 15 年前

find

$("div").find("span:first")

这些变化也应该起作用:

span:lt(1)
span:eq(0)
span:not(:gt(0)) // speaking of efficiency :)

RobertPitt 15 年前

$("span:first-child > div").text('Whooo')

方法2如果div有id

$("span:first-child > #divID");

$("span:first-child > div").each(function(){
   $(this).doSomethig();
})

测试用例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google AJAX Search API Sample</title>
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
    <script type="text/javascript">
      google.load("jquery", "1");

      function OnLoad()
      {
        jQuery("div > span:first-child").each(function(){
          console ? console.log(this) : alert(typeof this); //Logs the element
        });
      }
      google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
<div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>

   </div>
   <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>
  </body>
</html>