Question

I have 4 divs with class v_block. Each one has 2 links with class more. I’m trying to target the first link only in each div. Here’s the code http://jsfiddle.net/AAznD/2/

In real example (it’s displayed dynamically), I’m trying to change the background image of the link to make the first one appear with the wide border and the second to show just the word as you can see in the snapshot link below

it targets all the links with class “more” inside the div but it works great on jsfiddle

$(".v_block").each(function() {
  $(".v_block a.more:first-child").css({"background-image":"url(images/wide_more.gif)","width":"338px","height":"14px","left":"-23px"});
});

Here’s a snapshot: http://img90.imageshack.us/img90/8687/capturemrb.jpg.

.

Answer 1

You want to use this within the each, as this will be the specific div for that loop iteration; then use find to find the a.more elements within that div.

Updated Fiddle

$(document).ready(function(e) {
    $(".v_block").each(function() {
        $(this).find("a.more").filter(':first').css({"color":"#d31577","text-decoration":"none"});
    });
});

You can also use first() instead of filter(":first").

$(document).ready(function(e) {
    $(".v_block").each(function() {
        $(this).find("a.more").first().css({"color":"#d31577","text-decoration":"none"});
    });
});