如何使用 jquery 循环获取子元素值？

Question

我想动态获取子元素。我正在遍历 div 标记以获取值。但是它不起作用。

<div class="pg">
  <div class="row">
    <div class="col-3">
      <div class="fg">
        <input type="text" xl="12" value="a">
      </div>
      <div class="fg">
        <input type="text" xl="34" value="b">
      </div>
    </div>
  </div>
</div>

动态取值的javascript函数

如果行和列 div 不存在，则此代码有效。但是当它们被包含在内时它根本不起作用。任何人都可以帮我解决这个问题！

$(".pg").each(function(){
   $(this).children(".fg").each(function() {
       console.log($(this).attr('xl'));
   });  
});

Answer 1

首先使用children()，将return仅直接儿童，而不是深度搜索，

其次，使用data-xl代替xl，关于数据属性的更多信息here

此外，循环正在访问输入的父级 div，因此请改用 ".fg input"

搜索使用 find()，然后更改选择器以直接访问您的输入，.find(".fg input")

请参阅下面的工作片段：

$(".pg").each(function() {
  $(this).find(".fg input").each(function() {
    console.log($(this).val() ,"=", $(this).data('xl'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
  <div class="row">
    <div class="col-3">
      <div class="fg">
        <input type="text" data-xl="12" value="a">
      </div>
      <div class="fg">
        <input type="text" data-xl="34" value="b">
      </div>
    </div>
  </div>
</div>

<div class="pg">
  <div class="row">
    <div class="col-3">
      <div class="fg">
        <input type="text" data-xl="15" value="c">
      </div>
      <div class="fg">
        <input type="text" data-xl="84" value="d">
      </div>
    </div>
  </div>
</div>

如何使用 jquery 循环获取子元素值？

How can I get the child element value using jquery looping?

javascript

html

jquery

jquery-ui

jquery-plugins