Geek Answers Handbook

JQuery Find Exact Tree Elements

this is my html code where I want to select only the next element of the selected checkbox

<tr class="" role="row"> <td class="e-rowcell e-templatecell" role="gridcell" style="text-align: center;"> <input type="checkbox" class="XAxisrowCheckbox"> </td> <td class="e-rowcell e-hide" role="gridcell" style="text-align: left;">0</td> <td class="e-rowcell" role="gridcell" style="text-align: left;">Location ID</td> </tr> <tr class="e-alt_row" role="row" aria-selected="true"> <td class="e-rowcell e-templatecell e-selectionbackground e-active" role="gridcell" style="text-align: center;"> <input type="checkbox" class="XAxisrowCheckbox"> </td> <td class="e-rowcell e-hide e-selectionbackground e-active" role="gridcell" style="text-align: left;">1</td> <td class="e-rowcell e-selectionbackground e-active" role="gridcell" style="text-align: left;">Location Name</td> </tr>

JQuery code

  $(document).on('click', '.XAxisrowCheckbox', function () { $(".XAxisrowCheckbox").parent().next(this).css('background-color','red'); });

but the problem is that it applies the background color to all td, regardless of the selected

what i get enter image description here

I expect to change only this item that is selected enter image description here

+4
source share
5 answers

It is best to use closest for this:

 $(document).on('click', '.XAxisrowCheckbox', function () { $(this).closest('td').css('background-color','red'); });

It reads much better than parent and next , and if you need to, you could also bind the find statement. For instance:

 $(this).closest('td').find('a').css('color','red');

This essentially says: "Make your way to the tree until you find the first td wrapping element with a click, and then lower it again until you find all a elements

EDIT: Actual code that works after a workaround for me

 $(this).closest('td').next().css('background-color','red');
+3
source

Use this instead

 $(document).on('click', '.XAxisrowCheckbox', function () { $(this).parent().next().css('background-color','red'); });
+3
source

Remove this parameter in the following function and place it in the main selector:

 $(document).on('click', '.XAxisrowCheckbox', function () { $(this).parent().next().css('background-color','red'); });
+1
source

you can use

Your html,

 <table> <tr class="" role="row"> <td class="e-rowcell e-templatecell" role="gridcell" style="text-align: center;"> <input type="checkbox" class="XAxisrowCheckbox"> </td> <td class="e-rowcell e-hide" role="gridcell" style="text-align: left;">0</td> <td class="e-rowcell" role="gridcell" style="text-align: left;">Location ID</td> </tr> <tr class="e-alt_row" role="row" aria-selected="true"> <td class="e-rowcell e-templatecell e-selectionbackground e-active" role="gridcell" style="text-align: center;"> <input type="checkbox" class="XAxisrowCheckbox"> </td> <td class="e-rowcell e-hide e-selectionbackground e-active" role="gridcell" style="text-align: left;">1</td> <td class="e-rowcell e-selectionbackground e-active" role="gridcell" style="text-align: left;">Location Name</td> </tr> </table>

Create a class called red ,

 .red { background-color: red; }

Just apply the class when the checkbox is checked.

 $(document).on('click', '.XAxisrowCheckbox', function () { $(this).parents("tr").toggleClass("red", this.checked); });

Screenshot

+1
source 
  $(document).on('click', '.XAxisrowCheckbox', function () { $('.XAxisrowCheckbox input:checked').each(function() { $(this).parent().next(this).css('background-color','red'); }); });
+1
source

More articles:


All Articles