ansaurus

Question

Answer 1

+2 A:

If you want the mouseover on just the first occurence of the class editbox inside div

$('div.editbox:first').mouseover(function() {
   $(this).css("border", "1px solid red");
});

Edit

$('div.editbox').mouseover(function() {
   $(this).css("border", "1px solid yellow");
}).filter(':first').mouseover(function(){
  $(this).css("border", "1px solid red");
}).filter(':last').mouseover(function(){
  $(this).css("border", "1px solid blue");
})

TStamper 2009-05-20 16:13:52

Thanks TStamper; the CSS is only as an example. I have a function running on all the elements, but I want it to behave differently on the first and last elements, so I need to be able to detect when the function is running inside those.

SylvanK 2009-05-20 16:27:13

updated to compare for all

TStamper 2009-05-20 16:42:54

I'm very sorry TStamper; I appreciate the approach you're taking, but I'm attaching a moderately complex event handler to each element. Your approach would mean I need to have 3 separate versions of that function; or alternately, take an argument to the function when bound as to whether this is the first, last, or a middle element. I suppose that approach could work, but again, I'm trying to find the "right" JQuery way of doing this. Is what I'm doing with $(this).is(".class:first") really not workable?

SylvanK 2009-05-20 16:53:26

Wont the second filter only apply to the subset of the first filter? Therefore the blue mouse over doesn't have any effect? (I could be wrong, I'm new to JQuery)

Pool 2009-05-20 16:54:41

@Nick- the second filter is not nested within the first filter, so that selector is not applied to the next one

TStamper 2009-05-20 17:33:27

Answer 2

A:

have u tried

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}

ssmithstone 2009-05-20 16:16:19

That catches every box again.

SylvanK 2009-05-20 16:32:15

Answer 3

+2 A:

UPDATE: This works for the first element.

$('div.editbox').bind('mouseover', function(e) {
 if ($("div.editBox").index(this) == 0) {
      $(this).css("border", "1px solid red");
    }
});

And for the last element, this selector works:

if($("div.editBox").index(this) == ($("div.editBox").length-1)){
     $(this).css("color","red");
}

Jose Basilio 2009-05-20 16:19:19

Thanks, but that only picks it if it's the first child of the parent container; not the first element with the class name.

SylvanK 2009-05-20 16:31:42

Please try my update

Jose Basilio 2009-05-20 16:35:40

Sorry, doesn't pick it up at all. I'll add the html I'm using above.

SylvanK 2009-05-20 16:40:30

I finally got it to work. Try this.

Jose Basilio 2009-05-20 17:12:46

Thank-you José, that does indeed work! This is definitely usable, and more elegant than my kludged assignment of extra classes to the first and last elements. However, part of this exercise for me was to understand why my use if `is` wasn't working the way I was trying it. I'm still not sure why the .editbox:first selector works fine for assigning a style, but the "is" comparison doesn't work the same way.

SylvanK 2009-05-20 17:22:55

It's probably a bug in jQuery

Jose Basilio 2009-05-20 17:24:02

good thought, I couldn't think of an alternative way

TStamper 2009-05-20 17:34:45

Answer 4

A:

    $('div.editbox').mouseover(function() {
       //change the css for all the elements
       $(this).css("background-color", "yellow");
    })
    .filter(':first,:last').mouseover(function(){
      //execlude the first and the last
      $(this).css("background-color", "Blue");
    })

Marwan Aouida 2009-05-20 16:38:36

ansaurus

tags:

views:

answers:

Problems with JQuery selectors and "is"

related questions