查找父兄弟td隐藏值

Find parent sibling td hidden value

本文关键字：隐藏 td 兄弟 查找      更新时间：2023-09-26

当单击div.中的correct尝试类时，我想找到父兄弟td隐藏值

 <tr th:each="m : ${markWiseResultModel}">
      <td th:text="${m.id}" align="center"></td>
      <td class="topicTD">
           <input type="hidden" class="topicId" th:value="${m.topic.id}"/>
           <div th:text="${m.topic.name}" align="center"></div>
      </td>        
      <td data-toggle="modal" style="background:#b8d1f3;">
           <div class="correctAttempt" th:text="${m.correctAttemptCount}" align="center" ></div>
      </td>
      <td th:text="${m.correctAttemptPercent}" align="center" style="background:#99FF99;"></td>        
      <td th:text="${m.wrongAttemptCount}" align="center" style="background:#b8d1f3;"></td>
      <td th:text="${m.wrongAttemptPercent}" align="center" style="background:#99FF99;"></td>        
      <td th:text="${m.correctTotalCount}" align="center" style="background:#b8d1f3;"></td>
      <td th:text="${m.correctTotalPercent}" align="center" style="background:#99FF99;"></td>        
      <td th:text="${m.wrongTotalCount}" align="center" style="background:#b8d1f3;"></td>
      <td th:text="${m.wrongTotalPercent}" align="center" style="background:#99FF99;"></td>        
 </tr>

 <script>
      $(document).ready(function(){
           $('.correctAttempt').click(function(){
                var id = $(this).parents('td').siblings('.topicTD').find(".topicId").val();
                alert(id);
                $('#correctOutOfAttempt').modal('show');
            });
      });
 </script>

已经尝试过脚本，但没有成功。

试试这个-

演示

 $(document).ready(function(){
      $('.correctAttempt').click(function(){
        var id=  $(this).parent().prev('.topicTD').find(".topicId").val();
        alert(id);
        $('#correctOutOfAttempt').modal('show');
      });
    });

试试这个。

<script>
  $(document).ready(function(){
      $('.correctAttempt').click(function(){
        var id=  $(this).parent().prev('.topicTD').find(".topicId").val();
        alert(id);
        $('#correctOutOfAttempt').modal('show');
      });
    });
</script>

您可以使用closest来获取父tr元素，然后您需要找到.topicId。试试这个：

<script>
    $(document).ready(function(){
        $('.correctAttempt').click(function(){
            var id =  $(this).closest('tr').find(".topicId").val();
            alert(id);
            $('#correctOutOfAttempt').modal('show');
        });
    });
</script>

使用closest而不是严格按父级遍历的优点是，只要类名保持不变，就可以更改tr和td结构，而不必修改JS代码。

小提琴示例

相关文章：