【问题标题】:How to get all child inputs of a div element (jQuery)如何获取 div 元素的所有子输入(jQuery)
【发布时间】:2011-01-25 01:16:54
【问题描述】:

HTML:

<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="" /></td>
    </tr>
  </table>
</div>

我需要选择特定 div 中的所有输入。

这不起作用:

var i = $("#panel > :input");

【问题讨论】:

  • $("#panel").find(":input");

标签: jquery jquery-selectors


【解决方案1】:

不使用大于号:

$("#panel :input");

&gt; 仅表示元素的 直接 子元素,如果您希望所有子元素无论深度如何,只需使用空格即可。

【讨论】:

【解决方案2】:

你需要

var i = $("#panel input"); 

,取决于您到底想要什么(见下文)

var i = $("#panel :input"); 

&gt; 将限制为孩子,你想要所有的后代。

编辑:正如尼克指出的那样,$("#panel input")$("#panel :input) 之间存在细微差别。

第一个只会检索输入类型的元素,即&lt;input type="..."&gt;,但不会检索&lt;textarea&gt;&lt;button&gt;&lt;select&gt; 元素。谢谢尼克,我自己不知道这一点,并相应地更正了我的帖子。留下了这两个选项,因为我猜 OP 也没有意识到这一点,并且 - 从技术上讲 - 要求输入...... :-)

【讨论】:

  • 那么,:input 会选择所有输入/选择/文本区域字段吗?一下子?
  • 基本上,是的。选择器返回一个匹配数组,所以我猜你可以说它“一次”完成,但我不太确定你的意思是什么......
  • 我的意思是,“一起”只有那个选择器。 ":input 选择器描述:选择所有输入、文本区域、选择和按钮元素。"不知道,从现在开始我会用它:)
【解决方案3】:

'find' 方法可用于获取已缓存容器的所有子输入,以节省再次查找(而 'children' 方法只会获取直接子级)。例如

var panel= $("#panel");
var inputs = panel.find("input");

【讨论】:

  • 这对我来说是完美的——我正在使用 .each() 循环遍历元素,这意味着在循环中我正在使用 $(this) 访问当前元素。结果,我无法执行答案中建议的很多内容。 - 相反,我可以这样做 $(this).find("input");谢谢。
【解决方案4】:

如果您使用的是 Ruby on Rails 或 Spring MVC 之类的框架,您可能需要使用带有方括号或其他字符的 div,这是不允许的,您可以使用 document.getElementById,如果您有多个输入,此解决方案仍然有效同一类型。

var div = document.getElementById(divID);
$(div).find('input:text, input:password, input:file, select, textarea')
        .each(function() {
            $(this).val('');
        });
$(div).find('input:radio, input:checkbox').each(function() {
    $(this).removeAttr('checked');
    $(this).removeAttr('selected');
});

这个例子展示了如何清除输入,例如你需要改变它。

【讨论】:

    【解决方案5】:

    这是我的方法:

    您可以在其他活动中使用它。

    var id;
    $("#panel :input").each(function(e){	
      id = this.id;
      // show id 
      console.log("#"+id);
      // show input value 
      console.log(this.value);
      // disable input if you want
      //$("#"+id).prop('disabled', true);
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div id="panel">
      <table>
        <tr>
           <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td>
        </tr>
        <tr>
           <td><input id="Search_Popis" type="text" value="Po Val" /></td>
        </tr>
      </table>
    </div>

    【讨论】:

      【解决方案6】:
      var i = $("#panel input");
      

      应该工作:-)

      > 只会获取直接子节点,不会获取子节点的子节点
      : 用于使用伪类,例如。 :hover 等

      您可以在此处了解可用的伪类 css 选择器:http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

      【讨论】:

      • @henchman - :input 也是一个选择器,api.jquery.com/category/selectors/form-selectors 如果他有 &lt;textarea&gt; 或按钮 input 将找不到它,:input 会,所以有区别.
      • +1 ,所以省略 > 就可以了。现在我也在我推荐的页面上找到了它......
      猜你喜欢
      • 2016-11-06
      • 2014-08-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-03-26
      • 1970-01-01
      相关资源
      最近更新 更多