How to find elements with value and set a class in this closest <tr> in jquery?
Question
I need to find element that have value="123". The value of element will dynamic generated. All element with different values are include with #first-flight. I want to find the same and set a class on that closest <tr> with 'selected'. Actually, I want the smallest value of all element which have name='firstAmt' and type is 'hidden' and add a class 'selected' to that <tr> closest. Anyone you help me?
Here is my HTML Markup:
<table id="first-flight" class="table tbl-flight-listing-2 dataTable">
<thead>
<tr>
<th class="top" colspan="6">
<span class="strong">Kolkata <i class="fa fa-long-arrow-right"></i> Mumbai</span>
<span class="weak">Sun, 15 Nov</span>
</th>
</tr>
<tr>
<th> </th>
<th>Airlines</th>
<th>Depart</th>
<th>Arrive</th>
<th>Duration</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">7400</span>
<input type="hidden" name="firstAmt" value="7400">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">4793</span>
<input type="hidden" name="firstAmt" value="4793">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">5799</span>
<input type="hidden" name="firstAmt" value="5799">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">4238</span>
<input type="hidden" name="firstAmt" value="4238" class="kkk">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">7690</span>
<input type="hidden" name="firstAmt" value="7690">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">8600</span>
<input type="hidden" name="firstAmt" value="8600">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">7990</span>
<input type="hidden" name="firstAmt" value="7990">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">11433</span>
<input type="hidden" name="firstAmt" value="11433">
</td>
</tr>
<tr>
<td>
<input type="radio" name="leftflight" value="">
</td>
<td>
<span class="airLogo">
<img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27">
</span>
<span class="airNo weak">6E-595</span>
</td>
<td>
<span class="arrtime">09:45</span>
<span class="arrairline">Air India</span>
</td>
<td>12:35</td>
<td>
<span class="tottime">2h 50m</span>
<span class="away weak">non-stop</span>
</td>
<td class="fare-price">
<span class="price">15799</span>
<input type="hidden" name="firstAmt" value="15799">
</td>
</tr>
</tbody>
</table>
I try to find the smallest value with following jquery code:
var valuesAmt = $('#first-flight tbody tr td.fare-price input[name=firstAmt]').map(function () {
return parseInt($(this).val());
}).get();
var minimum = Math.min.apply(null, valuesAmt);
alert(minimum);
Its working fine. Now I want to add a class on that <tr> in which having the smallest (minimum) value.
Any one help me to build this?
1 answers
solution1
2 ACCPTED 2015-11-08 09:47:55
Use attribute-value selector as follow:
$('#first-flight tbody tr td.fare-price input[name=firstAmt][value="' + minimum + '"]')
.closest('tr') // Get closest ancestor tr
.addClass('selected'); // Add class 'selected' to it
The selector used here is the same that is used to get all the input elements having name as firstAmt and value of minimum and to select the closest ancestor <tr> , closest('tr') is used.
var valuesAmt = $('#first-flight tbody tr td.fare-price input[name=firstAmt]').map(function() { return parseInt($(this).val()); }).get(); var minimum = Math.min.apply(null, valuesAmt); $('#first-flight tbody tr td.fare-price input[name=firstAmt][value="' + minimum + '"]') .closest('tr').addClass('selected') .children('td').first().find(':radio').prop('checked', true); // To select the radio
.selected { color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="first-flight" class="table tbl-flight-listing-2 dataTable"> <thead> <tr> <th class="top" colspan="6"> <span class="strong">Kolkata <i class="fa fa-long-arrow-right"></i> Mumbai</span> <span class="weak">Sun, 15 Nov</span> </th> </tr> <tr> <th> </th> <th>Airlines</th> <th>Depart</th> <th>Arrive</th> <th>Duration</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">7400</span> <input type="hidden" name="firstAmt" value="7400"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">4793</span> <input type="hidden" name="firstAmt" value="4793"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">5799</span> <input type="hidden" name="firstAmt" value="5799"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">4238</span> <input type="hidden" name="firstAmt" value="4238" class="kkk"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">7690</span> <input type="hidden" name="firstAmt" value="7690"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">8600</span> <input type="hidden" name="firstAmt" value="8600"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">7990</span> <input type="hidden" name="firstAmt" value="7990"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">11433</span> <input type="hidden" name="firstAmt" value="11433"> </td> </tr> <tr> <td> <input type="radio" name="leftflight" value=""> </td> <td> <span class="airLogo"> <img src="img/airlines/AI.png" alt="Air India" title="Air India" height="23" width="27"> </span> <span class="airNo weak">6E-595</span> </td> <td> <span class="arrtime">09:45</span> <span class="arrairline">Air India</span> </td> <td>12:35</td> <td> <span class="tottime">2h 50m</span> <span class="away weak">non-stop</span> </td> <td class="fare-price"> <span class="price">15799</span> <input type="hidden" name="firstAmt" value="15799"> </td> </tr> </tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery : To find the closest tr class
jquery find closest class and increase value
find closest span by its class into a tr
jQuery select closest tr with specified class
how to find closest tr on condition of button is clicked or not
JQuery .closest(“tr”) is not working
Fileupload Closest tr in Jquery
Jquery - find closest text by class
Find closest class and slideDown in jQuery
Find closest input and set value
Related Tags