如何根據內容選擇 HTML 元素內的文本？

Question

我想查找網站內的列表或數組中有多少產品。 我想要的那個叫做Course ，它是<strong >元素中的文本。

我可以全部選擇它們，但如何僅過濾帶有 COURSE 一詞的那些我在瀏覽器中使用開發工具。

這是代碼：

我使用類var e = document.querySelectorAll('.card-type');的選擇器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

這是我一步一步的回答：

1. 選擇我想要的元素：
   var e = document.querySelectorAll('.card-type');
   
2. 將該變量變成一個數組：
   const f = Array.apply(null, e);
   
3. 現在用New Array過濾：
   let courses = f.filter(item => item.textContent === 'Courses');

如果您不想轉換為 ARRAY，則2 選項只需循環 NodeList。

let course = document.querySelectorAll('.card-type');  
 

用舊的好For 循環

for(let i = 0; i < course.length; i++) {
   console.log(course.item(i).innerText)
}

和IF語句只獲取 COURSE 詞

for (let i =0; i < course.length; i++) {
     if(course.item(i).innerHTML == "Course") 
     {
        console.log(course.item(i));
     }
}

Answer 3

使用jquery，您只需幾行即可完成，使用.text()和.each() 。

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

基本上你遍歷列表的所有元素，然后檢查每個元素的正確內容，然后做其他事情。

您可以使用其他功能，例如過濾，但這實際上完全取決於您希望對元素做什么。