javascript - 使用 jQuery 从 html 结构获取数据

Question

我有一个如下所示的 html 结构:

  <div>
    <div questionName="${data.Name}" class="item">
            <div class="left"><input type="checkbox" class="include-checkbox"/></div>
            <div class="center">{data.Name}</div>
            <div class="right"><input class="comment" placeholder="Comment (optional)"/>
    </div>
   ...
</div>

具有多个“项目”(带有 class="item"的 div)。这些是生成的。使用 jQuery，我需要遍历这些 div，如果选中该项目的复选框，则将中心 div 中的值和右侧 div 中的输入值作为键值对添加到对象(或 JSON 字符串) 。所以我生成的对象应该如下所示:

{
 "an item" : "some comment the user typed in",
 "another item": "some other comment",
 "yet another item" : ""
}

注释是可选的，如果用户没有填写任何内容，则应仅包含空字符串。

我能够获取所有项目，因为它们具有相同的类，并对它们运行 foreach:

function submitItems() {
    let items = {};
    $('.item').each(function() {
        ?   
    });
}

但是我如何访问项目中的元素呢？例如，我想检查复选框的状态，但是当我执行 $('.include-checkbox') 时，它会给我所有的状态，而不仅仅是我的元素内的状态。此外，.each() 构造中的函数似乎有自己的作用域，因此 items 对象不可见。

我可以控制生成的 html 的外观，因此我可以根据需要添加类、id 或其他属性。

Answer 1

您可以使用find() jQuery 中的方法。

function submitItems() {
    let items = {};
    $('.item').each(function() {
       // check checkbox is checked 
       if($(this).find('.left :checkbox')[0].checked)
          // if checked then get text and input value and set the property
          items[$(this).find('.center').text().trim()] = $(this).find('.right input').val();
    });
}