Question

我想查找网站内列表或数组中有多少产品。我想要的那个叫Course，它是<strong >元素中的文本。

我可以选择所有这些但是如何使用我在浏览器中使用开发工具的单词COURSE I＆＃39; m来过滤它们。

以下是代码：

我为班级var e = document.querySelectorAll('.card-type');

使用选择器

`[<strong class="card-type">Workshop</strong>, 
 <strong class="card-type">Course</strong>, 
 <strong class="card-type">Workshop</strong>,
 <strong class="card-type">Course</strong>,
 <strong class="card-type">Workshop</strong>, 
 <strong class="card-type">Workshop</strong>,
 <strong class="card-type">Workshop</strong>,
 <strong class="card-type">Workshop</strong>,
 <strong class="card-type">Course</strong>, 
 <strong class="card-type">Workshop</strong>,
 <strong class="card-type">Course</strong>,
 <strong class="card-type">Course</strong>, 
 <strong class="card-type">Course</strong>,
 <strong class="card-type">Course</strong>,
 <strong class="card-type">Course</strong>,
 <strong class="card-type">Course</strong> ]`

Answer 1

使用filter过滤您的列表。

let courses = e.filter(item => item.textContent === "Course");

这是使用let和fat arrow syntax也称为lambda，它们是ES6语法。如果您想要ES5 JavaScript，只需使用var和普通的匿名函数。

var courses = e.filter(function(item) {
    return item.textContent === "Course";
});

编辑：Kevin B发现我的功能未定义，他是正确的。这是因为e是NodeList而不是数组。我们要转换它！有多种方法可以将NodeList转换为数组。最简单的是splice。或者您也可以使用spread语法[...e].filter或Array.from()，这也是ES6的功能。

Answer 2

以下是我一步一步回答的问题：

选择我想要的元素：
var e = document.querySelectorAll('.card-type');
将该变量变为数组：
const f = Array.apply(null, e);
现在使用新数组过滤：
let courses = f.filter(item => item.textContent === 'Courses');

Answer 3

使用jquery，您可以使用.text()和.each()在几行内完成。

$('.card-type').each(function(el, i) {
  var text = $(el).text();
    if (text == "Course") {
       console.log("found it");
    }
});

基本上，你遍历列表中的所有元素，然后检查每个元素是否有正确的内容，并用它做其他事情。

您可以使用其他内容，例如过滤，但这实际上取决于您对元素的看法。

如何根据内容选择HTML元素中的文本？

3 个答案: