Help with jQuery selector

Question

I have the following markup

<div id="FirstDiv">
  <div class="MyClass">
      <span>
           <a href="#">link 1</a>
           <a href="#">link 2</a>
      </span>
  </div>
</div>
<div id="SecondDiv">
  <div class="MyClass">
      <span>
           <a href="#">link 1</a>
           <a href="#">link 2</a>
      </span>
  </div>
</div>

How can I select alla the <a> tag elements inside the DIV "SecondDiv"?

Actually I am doing

$(".MyClass > a").click(function (event) {

but this would select also links of the first div.

user113716 · Accepted Answer · 2010-10-14 01:03:53Z

4

$('#SecondDiv a')

This uses the ID of the SecondDiv element, and selects all descendant <a> elements.

You were using the > child selector, which would only select immediate children. And you're right that it would select from both .MyClass elements.

Another possibility would be to place a .delegate() on the SecondDiv element to match clicks against the nested <a> elements.

$('#SecondDiv').delegate( 'a', 'click', function() {
      // your code
});

EDIT: In reference to your comment below, you can limit it to <a> elements in the .MyClass element by placing that in the selector.

$('#SecondDiv .MyClass a')

Now any <a> elements that do not descend from .MyClass will not be included.

edited Oct 14, 2010 at 1:03

answered Oct 14, 2010 at 0:50

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lorenzo Over a year ago

Is there a way to use also the Myclass selector like $('#SecondDiv .MyClass a')

user113716 Over a year ago

@Lorenzo - Yes, if there will be other <a> elements under SecondDiv that are not also under .MyClass, then that selector would eliminate those.

vikmalhotra · Accepted Answer · 2010-10-14 00:51:12Z

2

You should use the ID Selector (#) over here instead of the class selector (.)

$("#SecondDiv a").click(function (event) {

Read more about ID Selector and Class selector.

answered Oct 14, 2010 at 0:51

vikmalhotra

10.1k20 gold badges100 silver badges138 bronze badges

Comments

John · Accepted Answer · 2010-10-14 00:51:15Z

2

$("#SecondDiv a").click(function(){
  alert("Hi-o");
});

answered Oct 14, 2010 at 0:51

John

9,51412 gold badges58 silver badges82 bronze badges

Comments

Krishna Chytanya · Accepted Answer · 2010-10-14 00:53:00Z

1

$("#SecondDiv").find("a").click(function(event) {});

answered Oct 14, 2010 at 0:53

Krishna Chytanya

1,4481 gold badge9 silver badges12 bronze badges

Comments

zod · Accepted Answer · 2010-10-14 00:56:18Z

0

why dontb yu use id of second div ('#second div')

or

http://api.jquery.com/children/

answered Oct 14, 2010 at 0:56

zod

12.5k25 gold badges74 silver badges107 bronze badges

Collectives™ on Stack Overflow

Help with jQuery selector

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related