CODEWITHSUNDEEP
jqueryselectselectorroweach
ant
ant

Reputation: 22948

jQuery select div in a row

I need advice on the following HTML:

<!-- Beginning of ROW !-->
<div id="row1">
 <div id="entry">
  free
  <span>some text</span>
  <p>DKK</p>
  <input type="radio" name="red<% Response.Write(counter); %>" id="radio" value="0" />
 </div>

 <div id="entry">
  week
  <span></span>
  <p>DKK</p>
  <input type="radio" name="red<% Response.Write(counter); %>" id="radio2" value="75" />
 </div>
</div>
<!-- End of ROW !-->

<!-- Beginning of ROW !-->
<div id="row2">
 .... same as in row 1
</div>
<!-- End of ROW !-->

nth row ..

Here is jQuery:

$("input").click(function() {
     $("input").parent("div").css("background", "url(images/div_bg.png)");
     $(this).parent("div").css("background", "url(images/div_bg_hover.png)");
});

What I'm trying to do: when I select a radio input the div in which it is located should change background and it works perfectly if there is only one row, but for instance if I try to select the value in first row then I select value in second row.

The div in second row where radio input is located changes background as it should but the div in first row reverse itself to other background although input remained checked. Here is what I'm trying to achieve

alt text

And here is what I achieve :

alt text

Upvotes: 2

Views: 3916

Answers (3)

Joel
Joel

Reputation: 19368

What is the purpose of your second line of jquery?

$("input").parent("div").css("background", "url(images/div_bg.png)");

This is going to reset the background of all the "entry" divs. If I understand your objective correctly I think you want:

$(this).parent("div").siblings("div.entry").css("background", "url(images/div_bg.png)");

That way only the siblings of the entry you are changing will get their backgrounds reset.

On a side note, you have multiple divs with the same id, which is not a good idea.

Upvotes: 3

Stefan Kendall
Stefan Kendall

Reputation: 67832

You're only assigning behavior to the item clicked, rather than all selected input boxes. You might want to make a function as such:

function foo()
{
   $('input :selected').css(bar);
}

Now whenever you get a click event on an input event, call bar. You may need to modify foo to meet your specifications.

Upvotes: 0

Mark Hurd
Mark Hurd

Reputation: 13076

This line: $("input").parent("div").css("background", "url(images/div_bg.png)" is causing all of the other items to reset to normal, allowing you to only have 1 active state at a time. You could scope it to the row so that each row may have one item selected.

Upvotes: 0

Related Questions