Question

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

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.