ansaurus

Question

How to access each element returned by first-child selector

Answer 1

+1 A:

$("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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
  <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"&gt;&lt;/script&gt;
    <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>

RobertPitt 2010-07-02 10:12:49

@RobertPitt `"span:first-child > div"` has to be `"div span:first-child"`

Ghommey 2010-07-02 10:20:10

yes sorry your correct, I was meaning to do `div > spac:first-child`.

RobertPitt 2010-07-02 10:31:53

Answer 2

+3 A:

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

Kai 2010-07-02 10:26:14

Answer 3

+3 A:

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.

Nick Craver 2010-07-02 10:28:26

you are right Nick, there is something more which I clearly missed. Please see my update. Thanks.

Cue 2010-07-02 10:46:46

@Cue - Edited to match your new markup :)

Nick Craver 2010-07-02 11:13:05

Thanks. The title of my question looks all irrelevant now though :).So it seems that the doc for :first-child is misleading."While :first matches only a single element, the :first-child selector can match more than one: one for each parent."Since :first-child requires that the child is actually the first element compared to :first

Cue 2010-07-02 11:23:43

@Cue -There's a selector for that! [:first-of-type](http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo) But...it's just a CSS3 selector at the moment, [one jQuery doesn't support in core](http://docs.jquery.com/DOM/Traversing/Selectors#Not_supported) (it does work in a selector if the *browser* supports it).

Nick Craver 2010-07-02 11:43:50

Answer 4

+2 A:

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

Anurag 2010-07-02 10:51:57

ansaurus

tags:

views:

answers:

How to access each element returned by first-child selector

related questions