selecting hidden span

Trying to select span within the first item in a usorted list but I can't quite seem to get the DOM right

    <li class="chapterItem"> <a
    href="http://www.neuromanga.com/mangaReader.php?chapterNo=12&amp;#pageNo=1"
    title="http://www.neuromanga.com/mangaReader.php?chapterNo=12&amp;#pageNo=1
    ">Naruto 522 world</a> <s开发者_如何学编程pan
    id="date">Nov 21st 2010</span> <br>
    <span style="display:none"
    class="hiddenChapNo">12</span> </li>

Here is the jQuery code I been trying to use to select it

alert($('li').first().$('.hiddenChapNo').text());

You need to use .find() to get a descendant here, like this:

alert($('li').first().find('.hiddenChapNo').text());

Or a bit more compact with :first and a descendant selector (space):

alert($('li:first .hiddenChapNo').text());

Your code certainly looks like it should work, I assume that there's another <li> before this one that trips it up.

Also, ids are (should be) unique in a web page, so $('#hiddenChapNo') should be sufficient.

Assuming you need multiple hidden spans, the proper way to mark them would be <span class="hiddenChapNo"> (you can then also hide them with CSS instead of inline styles).

Try just using alert($('#hiddenChapNo').text());. An id should be unique on a page, use classes if you need otherwise.

Found a solution

alert($('.hiddenChapNo').first().text());