Targeting single instance of css class with JQuery

Question

I need to target a single instance of a class, using JQuery, because I need to insert a new chunck of html code after (or before) an element on the page. My first thought was to use the "inserAfter" method. But, I soon realized it was a common class used several times in the document. The default syntax is like this, I believe:

$('<p>Test</p>').insertAfter('.inner');

I read that you can use siblings method, but I dont' see how I can combine the insertAfter/Before, and also, the instances of the class are identical - from body down to the actual content. So it's about targeting the second instance out of 5 (instances) or something and insert bla, bla code.

Is it possible? Or should I re-think the whole plan and... do something else? Thanks for any ideas, hints or suggestions.

adeneo · Accepted Answer · 2013-04-08 11:31:35Z

1

You can use eq() to target a specific instance of a class based on index. As it starts at zero, eq(1) would be the second instance of the class .inner :

$('.inner').eq(1).after('<p>Test</p>');

answered Apr 8, 2013 at 11:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

animuson · Accepted Answer · 2014-01-29 22:41:01Z

0

Try this:

$('.inner:nth-of-type(2)').after('<p>Test</p>');

Source(s)

jQuery API - nth-of-type() Selector

edited Jan 29, 2014 at 22:41

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Apr 8, 2013 at 11:33

Bill

3,52726 silver badges43 bronze badges

Collectives™ on Stack Overflow

Targeting single instance of css class with JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related