使用 jQuery 循环 td 只选择一个结果答案

【问题标题】：Selecting only one result from looping td with jQuery使用 jQuery 循环 td 只选择一个结果
【发布时间】：2021-05-05 15:31:12
【问题描述】：

我在html/php 表上有 td，它搜索文件名与相同行号标识符匹配的所有文档。

一个 td 可能会显示多个文档名称，如果它们的名称类似于 A12345 和 A12345_1。此 td 如下所示：

<td>
   <?php if (!empty($numero)){
      foreach($dokumentit as $dokumentti) {
         echo "<i class='fas fa-times'></i>
         <a class='dokumentti' href='$dokumentti'>" .basename($dokumentti). "</a>";
      } 
    } ?>
</td>

我希望能够通过单击 <i class='fas fa-times'></i> 来删除文档，为此我使用 jQuery 代码：

$('.fa-times').click(function(){
    var dokumentti = $(this).parent().find('.dokumentti').text();
    alert (dokumentti);
});

这适用于仅附加一个文档的 td，但如果 td 有多个文档，它会全部显示，我正在尝试使其始终仅显示您单击 <i class='fas fa-times'></i> 的文档名称。

有什么想法吗？

【问题讨论】：

试试$(this).next('.dokumentti').text();
@Swati 就是这样！感谢您的超级快速回答！

标签： javascript jquery css-selectors

【解决方案1】：

在您的情况下，使用 next() 访问同级链接，

你的代码应该是这样的

$('.fa-times').click(function(){
    var dokumentti = $(this).next('.dokumentti').text();
    alert (dokumentti);
});

这里是 sn-p 示例：

$('.fa-times').click(function(){
    var dokumentti = $(this).next('.dokumentti').text();
    alert (dokumentti);
});

.dokumentti {
  display:block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<i class='fas fa-times'>icon</i>
<a class='dokumentti' href='#dokumentti'> Doc 1</a>

<i class='fas fa-times'>icon</i>
<a class='dokumentti' href='#dokumentti'> Doc 2</a>

<i class='fas fa-times'>icon</i>
<a class='dokumentti' href='#dokumentti'> Doc 3</a>

<i class='fas fa-times'>icon</i>
<a class='dokumentti' href='#dokumentti'> Doc 4</a>
</div>

【讨论】：