How to aceess span directly using jQuery

Question

Hi All, I want to know how to get access of this [span class="myclass"] in below html structure..

        <ul>
    <li class="first">
      <span class="myclass"></span>
      <div class="xx">

        <span></span>
        ........
          </div>
   <li >
      <span class="myclass"></span>
      <div class="xx">

        <span></span>
         ........
      </div>
     </ul>

Here I need to write one function in [span class="myclass"], but i cant do it using $(".myclass") [I have few issues] I just want to directly access the span itself.How to do this..?

EDIT:the sln by phoenix is working fine..but lets say(just for my knowledge) the structure is

  <li >
      <span class="myclass"></span>
      <div class="xx">
        <li>
        <span></span>
       </li>
         ........
      </div>
   </ul>

so why the span inside 2 nd li(which is under div) is not getting the ref, is it bcoz they are not in the same level..if I need to access them do I need to do some thing like

enter code here

$("li").next(".xx").find(li span:first-child )..or something else is there? Thanks.

Answer 1

$("li span.myclass")

EDIT: Okay then maybe with

$("li span:first") //EDIT: Don't do that. See below.

apparently :first stops after the first hit. So :first-child is the way to go.

which will select the first span in every li-element. But this can be tricky in case you have other li-elements with spans inside...

EDIT: If you can't use the class you already have, maybe assigning an additional class helps?

<span class="myclass newClass"></span>
...
var spans = $("li span.newClass");

EDIT: As phoenix pointed out

$("li span:first-child")

returns a list with all span elements that are the first child of a li-element. I don't know if jQuery treats textnodes as child nodes. So if you have a space between <li> and <span>, this might be counted as the first-child. So check if you have any whitespace between your elements beside line breaks.

Answer 2

If span is the first child then you can use

first-child

selector

$("li span:first-child");