Selecting one element with multiple selectors in Jquery

Question

Hi All,

Im kinda new to Jquery, so this might be easy, then again i cant seem to find anything on Google. So here goes.

I basically have this:

<div>
    <div id="row1" class="col1" onMouseOver="OnMouseOver(11)">
         I dont want to select this
    </div>
    <div id="row1" class="col2" onMouseOver="OnMouseOver(12)">
         I want to select this
    </div>
    <div id="row2" class="col1" onMouseOver="OnMouseOver(21)">
         I dont want to select this
    </div>
    <div id="row2" class="col2" onMouseOver="OnMouseOver(22)">
         I dont want to select this
    </div>
</div>

and i want to select just the one div(eg. #row1 .col2) to change the css background image, but i cant get it to work. As it is i have a switch/case block that chooses which div to select.

i have tried different variaties of this selection:

$('#row1').find(".col1").css('background-image', 'url(Images/LosCol1Over.png)')

also

$('#row1','.col2').css('background-image','url(Images/LosCol1Over.png)')

and several other combi i can remember

I think the problem is compounded(or confounded maybe :D) by the fact that the columns have the same background-image and this is set in the css by

.col1{
    background-image: url(Images/LosCol1.png)
}    
.col2{
    background-image: url(Images/LosCol1.png)
}

Any ideas?

Answer 1

ids must be unique across the whole document. then:

$('#unique-id').css('background-image', 'url(Images/LosCol1Over.png)')

Answer 2

The class should be smack up against the #id selector like this:

$('#row1.col2').css('background-image','url(Images/LosCol1Over.png)');

But you really shouldn't ever have more than one element with a unique id. Perhaps you should designate the rows as additional classes so:

<div class="row1 col1"...
<div class="row1 col2"...

You could then select it like this:

$('.row1.col2').css('background-image','url(Images/LosCol1Over.png)');

Edit:

The reason the code you tried failed are for these reasons:

1. In your first example, you select a div#row1 with your initial $('#row1') and then try to use .find('.col1') to select the correct one. This will not work because find looks through descendants of the selected element, not the element itself. By using $('#row1.col1') instead, you are saying you want the #row1 that has the .col1 class.
2. In your second example, you have your parameters reversed and still have the problem of your first example. The correct order is $(selector, scope) where scope is the element that you want to restrict the search to instead of looking through the whole document. You used $('#row1', '.col1') which would look for a element with the id of row1 inside any element matching .col1. Of course looking for .col1 inside of #row1 would still be the same problem as your first example.

Answer 3

the id='' should be unique to the document,

to use multiple selectors you just combine them as you would in css

 $("#foo.bar").css(....

and I would suggest taking the onMouseOver='' out of your html and attach it inside the javascript with jquery

also looking at the naming convention you have you are picking elements based on position, you can do wthat without attaching indexes to classes with

 $("#parent div:eq(1)") ....

Answer 4

I'm just guessing that you want different mouseover images for column 1 and column 2? Maybe try something like this:

CSS

.col1{ background-image: url(Images/LosCol1.png) }
.col1Mo{ background-image: url(Images/LosCol1Over.png) }

.col2{ background-image: url(Images/LosCol1.png) }
.col2Mo{ background-image: url(Images/LosCol2Over.png) }

HTML

<div>
 <div class="col1">
  I dont want to select this
 </div>
 <div class="col2">
  I want to select this
 </div>
 <div class="col1">
  I dont want to select this
 </div>
 <div class="col2">
  I dont want to select this
 </div>
</div>

Script

$(document).ready(function(){
 addMo('col1');
 addMo('col2');
})
function addMo(cName){
 $('.' + cName).hover(function(){
  $(this).removeClass(cName).addClass(cName + 'Mo');
  }, function(){
  $(this).removeClass(cName + 'Mo').addClass(cName);
 })
}