Question

假设有以下选择器

$("div span:first-child")

应用于以下html代码

约翰，卡尔布兰登

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

as seen on jquery doc

有没有办法引用“每个”元素返回？

我似乎无法使用迭代它们.each（）（ .size（）返回0）

更新：你说得对，我出于某种原因错过了一些不同的东西，但我没有想到这可能是阅读文档时的问题。

因此，只有当元素实际上是第一个子元素而不仅仅是第一个子元素时， first-child 选择器才会返回。

e.g。

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

将仅返回第二个div的范围。

这是一个“功能”吗？是否有另一种选择第一个孩子的方法？（根据事件发生）

Answer 1

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

Answer 2

针对新问题进行了更新：这会找到每个<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）迭代它们。

必须是您发布的代码之外的东西，在该标记上运行确实有效，正如您在我的演示中所看到的那样。你需要看看你的实际标记有什么不同......这种差异可能是造成这个问题的原因。

Answer 3

使用find获取所有div的第一个匹配范围

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

这些变化也应该有效：

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

Answer 4

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

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

4 个答案: