如何使用jQuery find()方法获取容器内动态添加元素的name属性

以下是你尝试的几种写法的错误点：

• 第1种：$('#field').get(0)返回的是原生DOM对象，不具备jQuery的find方法，直接运行会抛出语法错误
• 第2种：jQuery的each方法仅接受回调函数作为参数，额外传入document不符合方法参数要求，逻辑无效
• 第3种：get[0]本身是语法错误，get是jQuery方法需要用()调用，即使修正为get(0)依然返回原生DOM，不存在each方法，运行报错
• 第4种：jQuery选择器的上下文语法为$(目标选择器, 上下文元素)，你将参数写反，导致上下文失效，最终查询范围变成了整个文档，所以会拿到#field外的元素

首先明确核心逻辑：jQuery的普通查询方法本身就能查询到已经插入到DOM中的动态生成元素，不需要特殊写法，你原本适配静态元素的代码逻辑本身没有问题，失效的唯一原因是你执行这段查询代码的时候，动态元素还没有被插入到#field节点内。

场景1：主动查询所有元素（比如表单提交时触发） #

确保代码执行时机在动态元素插入DOM之后，直接用原逻辑即可，也可以用上下文写法简化：

// 两种写法完全等价，都只会查询#field内部的元素
$('input, select, textarea', '#field').each(function() {
  const name = $(this).attr('name')
  // 后续处理逻辑
})

场景2：实时监听#field内新增元素，插入时自动获取name #

如果需要在元素刚插入DOM时就自动获取属性，用MutationObserver实现：

const targetNode = document.getElementById('field')
// 配置观察器：监听子节点变化，包含后代节点
const config = { childList: true, subtree: true }

const observer = new MutationObserver((mutationsList) => {
  for(let mutation of mutationsList) {
    // 遍历所有新增节点
    mutation.addedNodes.forEach(node => {
      // 新增节点本身是目标表单元素
      if (['INPUT','SELECT','TEXTAREA'].includes(node.nodeName)) {
        const name = node.getAttribute('name')
        // 自定义处理逻辑
        console.log('新增元素name：', name)
      }
      // 新增节点是容器，遍历容器内的表单元素
      else if (node.nodeType === 1) {
        $(node).find('input, select, textarea').each(function() {
          const name = $(this).attr('name')
          console.log('新增子元素name：', name)
        })
      }
    })
  }
})
// 启动观察
observer.observe(targetNode, config)

内容的提问来源于stack exchange，提问作者wenreloz