CODEWITHSUNDEEP
jqueryjquery-selectors
Doug Fir
Doug Fir

Reputation: 21322

Selector issues - how to select nth child

I thought I knew this, evidently not. I'd like to split this question into two parts: A & B.

A) I have the following html Nav and would like to select the 3rd line item a for an onlick event. I was trying to use: 

$('#mainmenu:nth-child(3) a').click(function(event){... function here

But that wasn't working as a selector.

<div id="mainmenu" class="clearingfix">
                    <ul>
                        <li><a href="https://example.com/index.php/main"  class="active">Home</a></li><li><a href="https://example.com/index.php/reports" >Reports</a></li><li><a href="https://example.com/index.php/reports/submit" >Submit a Report</a></li><li><a href="https://example.com/index.php/alerts" >Get Alerts</a></li><li><a href="https://example.com/index.php/contact" >Contact Us</a></li><li><a href="https://example.com/index.php/page/index/10" >How To Add</a></li><li><a href="https://example.com/index.php/page/index/12" >How it Works</a></li>                    </ul>

<div class="feedicon"><a href="https://example.com/index.php/feed/"><img alt="RSS" src="https://example.com/media/img/icon-feed.png" style="vertical-align: middle;" border="0" /></a></div>

</div>

How would I select the 3rd nav menu click?

B) I use inspect element on Chrome and Firebug on Firefox. In Chromes inspect element, for example, if I right click the particular anchor tag in question a list of selectors appear on the very bottom row. Is there a tool that tells you exactly what to write for a selector rather than trying to test and fiddle around. I know in theory how to select which elements I'd like but often it seems I get it wrong.

Upvotes: 0

Views: 64

Answers (2)

Blazemonger
Blazemonger

Reputation: 93003

I think you wanted this selector: 

$('#mainmenu li:nth-child(3) a')

That will select the list element which is a third child, instead of the #mainmenu which is also a third child, as you were doing.

Upvotes: 1

Chad
Chad

Reputation: 5428

Try:

$('#mainmenu a').eq(2).click(function() {});

or:

$('#mainmenu a:eq(2)').click(function() {});

Indexing starts at 0, so 2 == third element.

Upvotes: 2

Related Questions