How to access each element returned by first-child selector_问答_开发者

How to access each element returned by first-child selector

开发者 https://www.devze.com 2023-01-06 06:52 出处：网络

Assuming the following selector $(\"div span:first-child\") applied in following html code John, Karl, Brandon

相关专题：jquery

Assuming the following selector

$("div span:first-child")

applied in following html code

John, Karl, Brandon

   </div>
   <div>
    <span>Glen,</span>
    <span>Tane,&开发者_StackOverflow社区lt;/span>
    <span>Ralph</span>
  </div>

as seen on jquery doc

is there a way to reference "each" element returned?

I can't seem to be able to iterate through them using .each() (.size() returns 0)

Update: you are right there is something different which I missed for some reason but didn't occur to me that this might be an issue while reading the documentation.

So it seems that first-child selector returns only if the element is actually the first child and not just the first occurrence.

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>

will return only the span from the 2nd div.

Is that a "feature"? Is there an alternative way to select the first child? (based on occurrence)

Updated for new question: This finds the first span in each <div>, regardless if it's actually the first child.

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

You can see a demo here.

You can use .each() to do what you want, like this:

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

You can test it out here.

For this:

I can't seem to be able to iterate through them using .each() (.size() returns 0)

There must be something outside the code you posted, running on that markup does work, as you can see in my demo. You need to see what's different about your actual markup that...that difference is likely what's causing the issue.

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

Demo

Alternatively,

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

Demo2

Use find to get the first matching span in all div's

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

These variations should work as well:

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

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

Method 2 if the div has id

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

each.

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

Test Case::

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