如何从 html div 数组中获取特定值答案

【问题标题】：How to get specific value from html div array如何从 html div 数组中获取特定值
【发布时间】：2019-12-21 09:45:38
【问题描述】：

我的应用程序调用了一个返回数组的 web api。我将其绑定到 html div。此 div 包含复选框、名称、年龄。

我的要求是获取所选对象的姓名和年龄值。

我想在不使用表格的情况下实现这一目标

var parentDiv = document.getElementById('accountsList');

var htmlData = "";
for (var i = 0; i < result.Accounts.length; i++) {
  htmlData += '<div class="row" id="accountRow">';
  htmlData += '<div class="col-sm-4"> <input type="checkbox" onclick="calculateTotal(this)"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4"> Name ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"> Age' + result.Accounts[i].Age+  '</div>';
  htmlData += '</div><hr>'; 
}
parentDiv.innerHTML += htmlData;

我的要求是获取所选对象的姓名和年龄值。

【问题讨论】：

你选择的名字和年龄是什么意思？

标签： javascript jquery html css arrays

【解决方案1】：

一种方法是使用索引 i 来设置 id，然后获取这些 id 的值。

例如

var htmlData = "";
for (var i = 0; i < result.Accounts.length; i++) {
  htmlData += '<div class="row" id="accountRow">';
  htmlData += '<div class="col-sm-4"> <input type="checkbox" onclick="calculateTotal(this, ' + i + ')"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4" id="name' + i + '"> Name ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"  id="age' + i + '"> Age' + result.Accounts[i].Age+  '</div>';
  htmlData += '</div><hr>'; 
}

然后，当点击复选框时，触发它所属的i。

var calculateTotal = (element, indexId) => {

    var name = $('#name' + indexId).value();
    var age = $('#age' + indexId).value();

... do your stuff here ...
}

希望对你有帮助！

【讨论】：

【解决方案2】：

如果您需要的信息这么简单，我会使用data-* 属性。如果它更复杂，也许find 会是一个更好的解决方案。

由于您的数据非常简单，我使用了data-* 方法。基本上我们将数据保存到根元素，然后当我们单击复选框时，我们检查它是数据的父元素。如果我们愿意的话，我们可以将数据放在复选框上。

接下来我们使用getAttribute(key) 来获取元素的属性。

var parentDiv = document.getElementById('accountsList');

const result = {
  Accounts: [
    {Name: 'Billy', Age: 10},
    {Name: 'Bob', Age: 20},
    {Name: 'Joe', Age: 30},
  ]
}

var htmlData = "";
for (var i = 0; i < result.Accounts.length; i++) {
  htmlData += `<div class="row" id="accountRow_${i}" data-name="${result.Accounts[i].Name}" data-age="${result.Accounts[i].Age}">`;
  htmlData += '<div class="col-sm-4"> <input type="checkbox" onclick="calculateTotal(this)"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4"> Name: ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"> Age: ' + result.Accounts[i].Age +  '</div>';
  htmlData += '</div><hr>'; 
}
parentDiv.innerHTML += htmlData;

function calculateTotal() {
  console.clear();
  [...document.querySelectorAll('[type=checkbox]:checked')].forEach(itm => {
    let row = itm.closest('.row')
    console.log('Name:', row.getAttribute('data-name'), 'Age:', row.getAttribute('data-age'))
  })
}

&lt;div id="accountsList"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

var parentDiv = document.getElementById('accountsList');

const result = {
  Accounts: [
    {Name: 'Billy', Age: 10},
    {Name: 'Bob', Age: 20},
    {Name: 'Joe', Age: 30},
  ]
}

var htmlData = "";
for (var i = 0; i < result.Accounts.length; i++) {
  htmlData += `<div class="row" id="accountRow_${i}" data-name="${result.Accounts[i].Name}" data-age="${result.Accounts[i].Age}">`;
  htmlData += '<div class="col-sm-4"> <input type="checkbox" onclick="calculateTotal(this)"><span>Select</span></div>';
  htmlData += '<div class="col-sm-4"> Name: ' + result.Accounts[i].Name +  '</div>';
  htmlData += '<div class="col-sm-4"> Age: ' + result.Accounts[i].Age +  '</div>';
  htmlData += '</div><hr>'; 
}
parentDiv.innerHTML += htmlData;

function calculateTotal() {
  console.clear();
  [...document.querySelectorAll('[type=checkbox]:checked')].forEach(itm => {
    let row = itm.closest('.row')
    console.log('Name:', row.getAttribute('data-name'), 'Age:', row.getAttribute('data-age'))
  })
}

&lt;div id="accountsList"&gt;&lt;/div&gt;

【讨论】：