jQuery无法找到下一个元素

Question

几天前，我使用了另一个问题上的某人提供给我的代码，但是我已经更改了页面的HTML，现在它不起作用，但我无法弄清楚为什么。当计数器达到0时，它应该使按钮具有disabled属性，但它没有。这是HTML：

因此，应该使名为stop的元素失效。

<td class="text-left my-timer" data-time="10">10</td>
<form method="POST">
    <td><button type="submit" name="stop" class="btn btn-effect-ripple btn-square btn-danger">Stop</button></td>
    <input type="text" name="aID" value="431" class="hidden">
</form>

这是我收到的JavaScript代码。您可以看到，一旦计时器为0，它将查找按钮并向其添加禁用属性。

$(function(){
  // loop over each element to activate
  $('td.my-timer').each(function(){
    // "this" inside "each" is current element
    var $elem = $(this), 
         // get the time value stored in data-time attribute
         sec = $elem.data('time');
    // instance specific interval
    var timer = setInterval(function() {
       sec--;
       var html = sec > 0 ? sec : "<b>Finished</b>";
       $elem.html(html);
       if( sec == 0){
          clearInterval(timer);
          $elem.next().find('submit').prop('disabled', true);
       }
    },1000);
  });
});

- Patrick

Answer 1

submit 不是 HTML 元素，而是属性。

你的选择器是错误的。

使用 属性值选择器：

$elem.next().find('button[type="submit"]').prop('disabled', true);
//                ^^^^^^^^^^^^^^^^^^^^^^

您也可以使用以下方式使用:submit伪选择器：

选择所有类型为submit的元素。

$elem.next().find(':submit').prop('disabled', true);
//                ^^^^^^^^^

- Tushar

Answer 2

您的HTML无效，因为form不能是tr的子元素，请将整个表单移动到第二个td元素下，然后使用:submit选择器查找提交按钮。

$(function() {
  // loop over each element to activate
  $('td.my-timer').each(function() {
    // "this" inside "each" is current element
    var $elem = $(this),
      // get the time value stored in data-time attribute
      sec = $elem.data('time');
    // instance specific interval
    var timer = setInterval(function() {
      sec--;
      var html = sec > 0 ? sec : "<b>Finished</b>";
      $elem.html(html);
      if (sec == 0) {
        clearInterval(timer);
        $elem.next().find(':submit').prop('disabled', true);
      }
    }, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <td class="text-left my-timer" data-time="10">10</td>
  <td>
    <form method="POST">
      <button type="submit" name="stop" class="btn btn-effect-ripple btn-square btn-danger">Stop</button>
      <input type="text" name="aID" value="431" class="hidden" />
    </form>
  </td>
</table>

<td class="text-left my-timer" data-time="10">10</td>
<td>
    <form method="POST">
        <button type="submit" name="stop" class="btn btn-effect-ripple btn-square btn-danger">Stop</button>
        <input type="text" name="aID" value="431" class="hidden"/>
    </form>
</td>

- Arun P Johny