jQuery 特定 class 选择器
jQuery selector for specific class
我有一个类似的 table 是这样的:
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
<td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
<td class="trow">
<input type='text' class='place' name='place[]' />
<span class="check"></span>
</td>
</tr>
<tr>
<td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
<td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
<td class="trow">
<input type='text' class='place' name='place[]' />
<span class="check"></span>
</td>
</tr>
<tr>
<td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
<td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
<td class="trow">
<input type='text' class='place' name='place[]' />
<span class="check"></span>
</td>
</tr>
</table>
实际上看起来像这张照片:
查看 table
现在,如果我将 jQuery 脚本写入 select 任何特定的 .check class (即 third row-third cell-span)并写入任何 html 消息, selector 应该是什么?
如您所知,如果我使用 $('.check').html("Hello World");
那么它会在所有范围内打印 Hello World
。我只需要在特定范围内打印 Hello World
。
TIA.
您可以使用 :eq(n)
(选择器)或 .eq(n)
(jquery 方法)(均基于 0)来定位特定的基于索引的元素,例如:
$(".check:eq(2)").text("hello world")
$(".check").eq(2).text("hello world")
$(".check:eq(2)").text("hello world (2)")
$(".check").eq(1).text("hello world (1)")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> .trow </td>
<td class="trow"> .trow </td>
<td class="trow"> <span class="check"></span> </td>
</tr>
<tr>
<td class="troe"> .trow </td>
<td class="trow"> .trow </td>
<td class="trow"> <span class="check"></span> </td>
</tr>
<tr>
<td class="troe"> .trow </td>
<td class="trow"> .trow </td>
<td class="trow"> <span class="check"></span> </td>
</tr>
</table>
我建议你使用:eq()
到 select 第三行,第三个单元格,跨度,你可以使用这样的东西
$( "table tr:eq(3) .check" ).text('CONTENT');
关于您的评论,我将 the fiddle 中的代码更新为
$('input').on('blur', function() {
var t = $(this);
t.closest('tr').find('.check').text('Hello World');
})
当您在输入字段外部单击时(模糊事件),它会获取行元素并搜索 .check
元素。代替 .text,一旦 selected,您就可以随心所欲地使用它。
您可以使用 nth-child
并获得第三行第三个单元格跨度。看下面的代码
$(function(){
$("table tr:nth-child(4) td:nth-child(3) span.check").html("Changed text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
</table>
尝试使用 :nth-child(2)
$(function() {
$("tr:nth-child(2)").find('.check').html('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
</table>
我有一个类似的 table 是这样的:
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
<td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
<td class="trow">
<input type='text' class='place' name='place[]' />
<span class="check"></span>
</td>
</tr>
<tr>
<td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
<td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
<td class="trow">
<input type='text' class='place' name='place[]' />
<span class="check"></span>
</td>
</tr>
<tr>
<td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
<td class="trow"> <input type='text' class='lat' name='long[]' /> </td>
<td class="trow">
<input type='text' class='place' name='place[]' />
<span class="check"></span>
</td>
</tr>
</table>
实际上看起来像这张照片:
查看 table
$('.check').html("Hello World");
那么它会在所有范围内打印 Hello World
。我只需要在特定范围内打印 Hello World
。
TIA.
您可以使用 :eq(n)
(选择器)或 .eq(n)
(jquery 方法)(均基于 0)来定位特定的基于索引的元素,例如:
$(".check:eq(2)").text("hello world")
$(".check").eq(2).text("hello world")
$(".check:eq(2)").text("hello world (2)")
$(".check").eq(1).text("hello world (1)")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> .trow </td>
<td class="trow"> .trow </td>
<td class="trow"> <span class="check"></span> </td>
</tr>
<tr>
<td class="troe"> .trow </td>
<td class="trow"> .trow </td>
<td class="trow"> <span class="check"></span> </td>
</tr>
<tr>
<td class="troe"> .trow </td>
<td class="trow"> .trow </td>
<td class="trow"> <span class="check"></span> </td>
</tr>
</table>
我建议你使用:eq()
到 select 第三行,第三个单元格,跨度,你可以使用这样的东西
$( "table tr:eq(3) .check" ).text('CONTENT');
关于您的评论,我将 the fiddle 中的代码更新为
$('input').on('blur', function() {
var t = $(this);
t.closest('tr').find('.check').text('Hello World');
})
当您在输入字段外部单击时(模糊事件),它会获取行元素并搜索 .check
元素。代替 .text,一旦 selected,您就可以随心所欲地使用它。
您可以使用 nth-child
并获得第三行第三个单元格跨度。看下面的代码
$(function(){
$("table tr:nth-child(4) td:nth-child(3) span.check").html("Changed text");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
</table>
尝试使用 :nth-child(2)
$(function() {
$("tr:nth-child(2)").find('.check').html('test');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
<th class="theader"> .theader </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
<tr>
<td class="troe"> .trow </th>
<td class="trow"> .trow </th>
<td class="trow"> <span class="check"></span> </th>
</tr>
</table>