特定类的jQuery选择器

Question

我有一个类似的表格：

 <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>

实际上如下图所示： 见表  现在，如果我编写一个jQuery脚本以选择任何特定的.check类（即第三行-第三单元格跨度）并编写任何html消息，那么选择器应该是什么？ 如您所知，如果我使用$('.check').html("Hello World");，那么它将在所有跨度中打印Hello World。我只需要在特定范围内打印Hello World。 TIA。

Answer 1

您可以使用/flowfile-queues/{id}/flowfiles/{flowfile-uuid}/content（选择器）或:eq(n)（jquery方法）（都基于0）来定位基于索引的特定元素，例如：

.eq(n)

$(".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)")

Answer 2

我建议您使用:eq()

要选择第三行，第三单元格，跨度，可以使用类似的内容

logs_from

Here's a working fiddle

---

关于您的评论，我将the fiddle中的代码更新为此

$( "table tr:eq(3) .check" ).text('CONTENT');

这是当您在输入字段之外单击时（模糊事件），它是row元素并搜索$('input').on('blur', function() { var t = $(this); t.closest('tr').find('.check').text('Hello World'); }) 元素。选中后，您就可以使用它来代替.text。

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>