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');

Here's a working fiddle


关于您的评论,我将 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>