jQuery 特定 class 选择器

Question

我有一个类似的 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.

Answer 1

您可以使用 :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>

Answer 2

我建议你使用: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，您就可以随心所欲地使用它。

Answer 3

您可以使用 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>

Answer 4

尝试使用 :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>

jQuery 特定 class 选择器

jQuery selector for specific class

jquery

jquery-selectors