如何找到具有值的元素并在这个最接近的地方设置一个类<tr>在 jquery 中？
[英]How to find elements with value and set a class in this closest <tr> in jquery?
问题描述
I need to find element that have value="123".
我需要找到 value="123" 的元素。 The value of element will dynamic generated.元素的值将动态生成。 All element with different values are include with #first-flight.所有具有不同值的元素都包含在#first-flight 中。 I want to find the same and set a class on that closest <tr> with 'selected'.我想找到相同的并在最接近的<tr>上设置一个带有“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.实际上，我想要 name='firstAmt' 和 type 为 'hidden' 的所有元素的最小值，并向最接近的<tr>添加一个类 'selected' 。 Anyone you help me?有人帮我吗？
Here is my HTML Markup:这是我的 HTML 标记：
<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:我尝试使用以下 jquery 代码找到最小值：
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.现在我想在<tr>上添加一个具有最小（最小值）值的类。
Any one help me to build this?有人帮我建这个吗？
1 个解决方案
解决方案1
2 已采纳 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.此处使用的选择器与用于获取名称为firstAmt且值为minimum所有输入元素以及选择最近的祖先<tr>所用的选择器相同，使用了closest('tr') 。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery：查找最接近的tr类 - Jquery : To find the closest tr class
jQuery查找最接近的类并增加价值 - jquery find closest class and increase value
根据类别找到最接近的跨度 - find closest span by its class into a tr
jQuery选择指定类的最接近tr - jQuery select closest tr with specified class
如何在按钮被点击的情况下找到最近的 tr - how to find closest tr on condition of button is clicked or not
jQuery .closest（“ tr”）无法正常工作 - JQuery .closest(“tr”) is not working
Fileupload在Jquery中最近的tr - Fileupload Closest tr in Jquery
jQuery-按类查找最接近的文本 - Jquery - find closest text by class
在jQuery中找到最接近的类和slideDown - Find closest class and slideDown in jQuery
查找最接近的输入和设定值 - Find closest input and set value
相关标签