Question

我想在div中单击correctAttempt类时找到父级兄弟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>

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

Answer 1

试试这个。

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

Answer 2

您可以使用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代码，只要类名仍然存在同样的。

Example fiddle

Answer 3

试试这个 -

Demo

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

查找父级兄弟td隐藏值

3 个答案: