获取带有特定标签jQuery的子元素答案

【问题标题】：Getting elements children with certain tag jQuery获取带有特定标签jQuery的子元素
【发布时间】：2011-01-26 18:46:43
【问题描述】：

我试图通过只提供表单的名称并且只知道那些想要的字段是输入元素来从 jQuery 中获取某个表单的所有输入元素。

假设：

<form action='#' id='formId'>
<input id='name' />
<input id='surname'/>
</form>

如何使用 jQuery 单独访问它们？我尝试了类似$('#formId > input') 之类的方法但没有成功，实际上控制台上出现了错误"XML filter is applied to non-XML value (function (a, b) {return new (c.fn.init)(a, b);})"

也许我必须与 .children 或类似的东西一起做？我是 jQuery 的新手，我不太喜欢 Docs。它在 Mootools 中要友好得多，或者我只是需要习惯它。

哦，最后但并非最不重要的一点是，我之前已经看到它被问过但没有最终答案，我可以使用 jQuery 创建一个新的 dom 元素并在将它插入（如果我曾经这样做的话）到解码代码之前使用它吗？在 mootools 中，我们有类似 var myEl = new Element(element[, properties]); 的东西然后你可以在进一步的表达中引用它，但我不明白如何在 jQuery 上做到这一点

我最终做的是这样的事情：$('#where').before("<a id='linkId' href='#'>Link Text</a>")，但这违背了在插入它之前使用它的要求，如果你知道我的意思的话。

提前致谢。

【问题讨论】：

标签： jquery dom tags css-selectors elements

【解决方案1】：

如果您想要所有后代，那么@woland 的答案有效。如果您真的只想要您的 > 所指示的直接子代，那么

$('#form').children('input')

Wolands 匹配姓名、姓氏和电话。我的只匹配姓名和姓氏

<form action='#' id='formId'>
<input id='name' />
<input id='surname'/>
<div>
<input id='phone'/>
</div>
</form>

【讨论】：

那有什么区别呢？ #formId > input 应该完成这项工作。无论如何+1，很好的答案。
在css选择器中，“#formId > input”和“#formId input”的区别在于“>”只匹配dom中#formId正下方的元素。 “#formId input”匹配任何后代。输入可以嵌套在 15 个 div 中并且仍然匹配。

【解决方案2】：

我希望这能回答你的问题。

<script type="text/javascript">

$(document).ready(function() {
        // Question part 1
    var formInputs = $("form#formId :input");
    formInputs.each(function(index) {
         alert(index + ': ' + $(this).attr("id") + "=" + $(this).val());
    });

        // Question part 2
    var a = $("<a id='linkId' href='#'>Link Text</a>");
    a.click(function(){alert("hello")});
    $('#where').before(a);


});
</script>

<form action="#" id="formId">
  <input id="name" type="text" value="foo" />
  <input id="surname" type="text" value="bar" />
  <div>
  <input id="phone" type="text" value="911"/>
  </div>
</form>
</div>
<div id="where"></div>

【讨论】：

【解决方案3】：

它是这样工作的：

$('#formId input')

【讨论】：

【解决方案4】：

如果您想遍历所有输入，请查看 jQuery 中的 each() function：

【讨论】：

+1 教我每个功能，即使我读过，我也忘记了。