如何从一个元素中的元素获取数据 - Javascript

Question

我想从HTML元素中获取一些数据。数据重复。想象一下调查页面，显示许多问题的结果：

以下是我对每个问题的信息的主要元素容器的示例：

每个“div”元素都是一个容器。在里面我可以找到元素“div，tr，td”等。我想创建一个脚本来浏览每个容器并获取相同的数据：如问题编号，问题文本，响应选项文本，值等。

这是我到目前为止所尝试的内容：

var title = $('.sm-question-view').contents().find('.sm-question-number');

我的意图是在其中一个容器“sm-question-view”中获取sm-question-number，但我得到了页面中所有“sm-question-number”的列表。由于我打算每个问题以csv格式存储数据，因此对我来说管理起来更加困难。

我也只尝试过：

var title = $('.sm-question-view');

标题检索对象，我可以浏览它以查找所有项目，但导航也很复杂，因为我需要通过很多元素来获取我想要的最终文本。

我心中的逻辑可以用这个伪代码表示：

对于每个容器：

csv_string =查找（问号）.text;

csv_string + =查找（问题标题）.text;

csv_string + =查找（question-view-sub-header）.text;

csv_string + = Find（label-txt-shadow-it）.text;

当然，这个伪代码只是我想要实现的内容的简要表示。 有什么想法吗？我将继续阅读“find（）”的用法，但感谢任何帮助。

由于

Answer 1

我建议您为需要检索的每一点信息添加一个类（即sm-question-number，sm-question-title，...）

然后，您可以通过以下代码循环查看问题列表：

$('.sm-question-view').each(function(index, el) { // loop through each question
    const title = $(this).children('.sm-question-title').text();
    // this points to the current question that is looping
    // find() function search through the element's descendant to find the class
});

Answer 2

您的伪代码实际上是正确的：

const wrapper = $('.sm-question-view');

let csv_string = '';
wrapper.each(function() {
  csv_string =  $(this).find(number).text() + ',';
  csv_string += $(this).find(title).text() + ',';
  csv_string += $(this).find(view - sub - header).text() + ',';
  csv_string += $(this).find(label - txt - shadow - it).text() + ',';
  csv_string += '\n';
});

现在用选择器替换.find()内的值。

如果您不熟悉.find()，请按照以下方式考虑：它完全与$(…)完全相同，只是它只搜索其他元素。

另请注意，您需要.each()，因为您实际上需要连续使用相同元素的更多方法。