如何从一个元素中的元素获取数据-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');

title会检索该对象，我可以浏览它以查找所有项目，但是导航也很复杂，因为要获得所需的最终文本，我需要遍历许多元素。

我脑海中的逻辑可以用以下伪代码表示：

对于每个容器：

csv_string =查找（问题编号）.text;

csv_string + = Find（问题标题）.text;

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

csv_string + =查找（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() ，因为实际上您希望在同一行中的同一元素上使用更多方法。