Question

我有以下Html结构（它是来自更大代码片段的片段）。

<table>
    <tr>
        <td>
            <div style="margin-bottom:1em;clear:both">
                <input value="0" type="text" id="someTextField" disabled>
                <button type="button" class="someClass" disabled></button>
            </div>
        </td>
    </tr>
</table>

我想在输入text-element中添加一个事件处理程序，用于检查它是否被禁用。如果禁用，则不显示按钮。

我从其他问题尝试了几个JQuery解决方案（如.next()或.closest()），但如果当前对象是输入元素，则无法选择按钮元素。

如果我这样做：$JQ('#someTextField').closest()我得到一个空数组。

如果我这样做：$JQ('someTextField').parent().next('someClass')我也得到一个空数组。

我对JQuery很新，所以我可能会错过很明显的东西。

Answer 1

在定位下一个元素时，您缺少类选择器.：

$(function(){ //or $(document).ready(function() {
  $('#someTextField').next('.someClass')
});

Answer 2

充分使用.next()。你正试图获得下一个兄弟按钮

$JQ('#someTextField').next('.someClass')

Answer 3

＆＃13;

$(document).ready(function() {

  alert($("#someTextField").parent().find(".someClass").attr("type"));

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div style="margin-bottom:1em;clear:both">
        <input value="0" type="text" id="someTextField" disabled>
        <button type="button" class="someClass" disabled></button>
      </div>
    </td>
  </tr>
</table>

＆＃13;

您可以访问它，如上例

所示

Answer 4

<table>
    <tr>
        <td>
            <div style="margin-bottom:1em;clear:both">
                <input value="0" type="text" id="someTextField" disabled>
                <button type="button" class="someClass" disabled></button>
            </div>
        </td>
    </tr>
</table>

$(document).ready(function() {

    enter code here

  if($('someTextField').is(':disabled')){
      $(".someClass").hide();
  }

});

Answer 5

这应该有用，如果它没有可疑的东西。它选择禁用的输入字段，如果它具有.someClass，则隐藏下一个元素。如果没有禁用输入字段，则不选择任何内容。如果下一个元素没有类.someClass，则不会隐藏任何内容。

＆＃13;

    jQuery(document).ready(function() {
      jQuery('#someTextField:disabled').next('.someClass').hide();  
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div style="margin-bottom:1em;clear:both">
        <input value="0" type="text" id="someTextField" disabled="disabled">
        <button type="button" class="someClass" disabled="disabled">Test</button>
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 6

if($('someTextField').is(':disabled')){
   $('#someTextField').next('.someClass').hide();
}

JQuery - 在我的html结构中获取下一个元素

6 个答案: