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

I want to find how many products are in a list or array inside a website. The one I want to it's called Course which is text inside the <strong > element.

我想知道网站内的列表或数组中有多少产品。我想要的那个叫做Course,它是元素中的文本。

I can select them all but how can I filter just the ones with the word COURSE I'm using development tools inside my browser.

我可以选择所有这些,但是我怎样才能过滤使用COURSE这个词我在浏览器中使用开发工具。

Here is the code:

这是代码:

I use a selector for the class var e = document.querySelectorAll('.card-type');

我使用类var的选择器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> ]`

3 个解决方案

#1

Filter your list with filter.

使用过滤器过滤列表。

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

This is using let and fat arrow syntax aka a lambda which are ES6 syntax. If you want ES5 JavaScript, simply use var and a normal anonymous function.

这是使用let和fat箭头语法aka lambda,它是ES6语法。如果你想要ES5 JavaScript,只需使用var和一个普通的匿名函数。

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

Edit: Kevin B spotted that my function will be undefined and he his right. That is because e is a NodeList and not an array. We have to convert it! There are multiple ways to convert a NodeList to an array. The easiest being splice. Or you can get fancy and use spread syntax [...e].filter or Array.from() as well, which are both also ES6 features.

编辑:凯文B发现我的功能将是未定义的,他是正确的。那是因为e是NodeList而不是数组。我们要转换它!有多种方法可以将NodeList转换为数组。最简单的拼接。或者你也可以使用扩展语法[... e] .filter或Array.from(),它们也是ES6的特性。

#2

Here is what I did step by step answer:

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

Select the elements I want to:
var e = document.querySelectorAll('.card-type');

选择我想要的元素:var e = document.querySelectorAll('。card-type');

Make that variable into an Array:
const f = Array.apply(null, e);

将该变量变为数组:const f = Array.apply(null,e);

Now filter with the New Array:
let courses = f.filter(item => item.textContent === 'Courses');

现在使用New Array过滤:let courses = f.filter(item => item.textContent ==='Courses');

#3

-1

Using jquery, you can do it in only a few lines, using .text() and .each().

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

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

Basically you iterate through all the elements of the list, then check each one for the right content, and do something else with that.

基本上,您遍历列表中的所有元素,然后检查每个元素是否有正确的内容,并对其执行其他操作。

You can use other things like filtering down, but it really all depends on what you're looking to do with the elements.

您可以使用其他内容,例如过滤,但这实际上取决于您要对元素执行的操作。

#1