选择先前的锚标记并使用jQuery向其添加一个类

Question

Basically I've got two anchor tags separated by a div.

<a class="foo"></a>

<div class="count">0</a>

<a class="bar"></a>

and I'm doing something like this:

       var addClass = $(this).parent().children('a:first-child').addClass('new');

It will then add it to the first anchor tag like so:

<a class="foo new"></a>

I know using the nth:child selector is pretty expensive, so I was wondering if there was an easier way to select that previous anchor node, (while ignoring the second one).

Answer 1

You could do this

$(this).parent().children('a:eq(0)').addClass('new');

Learn more about :eq()

Alternatively, if there are no elements between the <a> and the <div> , you could do

$(this).prev('a');

Learn more about .prev()

Answer 2

I'd probably combine prevAll with first (or eq(0) , since first just calls eq(0) — but I find first more readable):

$(this).prevAll("a").first().addClass("new");
// or
$(this).prevAll("a").eq(0).addClass("new");

prevAll returns all of the element's preceding siblings, in order starting with the closest sibling, and of course first / eq(0) reduces the set to the first element.

You might be tempted to use the :first selector with prevAll to avoid building up an unnecessary list of siblings, but to my surprise it works better to use first after-the-fact.

Answer 3

How about:

$(this).siblings('a').eq(0).addClass(0);

Actually, if your structure is as simple as in your example, you can just do a simple:

$(this).prev().addClass(0);

jQuery's traversal methods give you lots of ways to get to any given destination.