如何在 JavaScript 中使用 querySelector Select 具有特定类的所有子元素，而不考虑它们在 HTML 中出现的顺序

我可以看到您的代码中存在一些问题，所以这里有一个解释.

首先，这是我自己写<script>的方法，希望能让它更容易理解.如果你不想这样做，你可以不这样做.此块不会更改代码所做的任何操作.

function queryButton(filter) {

  let feedDiv = document.querySelector("div.cpFeed"), // Get's the first <div> with a class of cpFeed
      cardDiv = feedDiv.querySelectorAll("div.card-news"), // Get's all <div> children of feedDiv with a class of card-news
      unnamedDiv, // pre-sets to a variable to undefined
      i, // pre-sets to a variable to undefined
      txtValue // pre-sets to a variable to undefined

  for (i = 0; i < cardDiv.length; i++) { // Sets a previously undefined variable to 0, to be looped through

    unnamedDiv = cardDiv[i].querySelector(".d-none") // Gets first of any element, child of the indexed (i) cardDiv, with a class d-none

    [0] // Does nothing

    txtValue = unnamedDiv.textContent || div.div.innerHTML // returns unnamedDiv.textContent if unnamedDiv.textContent is not undefined. Otherwise, returns div.div.innerHTML, which is not assigned, so it will error out.

    // Returned error from div.div.innerHTML:
    // Uncaught ReferenceError: div is not defined
    // at queryButton (example.html:56:44)
    // at HTMLButtonElement.onclick (example.html:5:45)

    if (txtValue.toUpperCase().indexOf(filter) > -1) { // Checks whether an uppercase string's index of the filter param is greater than -1

      cardDiv[i].style.display = "" // Sets the indexed (i) cardDiv's display to empty / it's default value.

    } else {

      cardDiv[i].style.display = "none" // Sets the indexed (i) cardDiv's display to "none"

    }
  }
}

希望仅通过上面的 comments ，您就能够以自己的方式解决您的错误.

当然，如果您只想要一个可工作的示例，这里是我实际让脚本工作的例子.

function queryButton(filter) {

  // Switched to const since these variable will not be changed
  const feedDiv = document.querySelector(".cpFeed"), // Get's the first of any element with a class of cpFeed
        cardDivs = feedDiv.querySelectorAll(".card-news") // Get's all of any element, children of feedDiv, with a class of card-news
        // unnamedDiv, – Removed to be assigned per cardDiv later
        // i, – Removed because for loop is swtiched to forEach()
        // txtValue – Removed to be assigned per cardDiv later

  // New forEach() instead of for loop
  cardDivs?.forEach((cardDiv) => {
    
    // Adding variables as const since they do not change
    const unnamedDivs = cardDiv.querySelectorAll(".d-none") // Gets all of any element, child of the the current cardDiv, with a class d-none
    
    let display = "none" // preset to none
    
    unnamedDivs?.forEach((unnamedDiv) => {
      
      // Checks whether display has already succeeded in one of the unnamedDivs
      if (display !== "none") display = unnamedDiv.textContent.toUpperCase() === filter ? "" : "none"

      // Always returns something
      cardDiv.style.display = display

    })
  })
}

正如您所看到的，我在这里做了一些事情来简化代码，使其更具可读性，并添加了一些安全判断，这样我们就可以避免尽可能多的错误.

我还注意到您的HTML中有几个错误:

<!-- Two class attributes will break things -->
<!-- BEFORE: <div class="card-news" class="d-none"> -->
<div class="card-news">
      
  <div style="display: none;" class="d-none">Employee</div>
      
  <div style="display: none;" class="d-none">Seasonal</div>
      
  <div>Christina</div>
      
</div>
    
<!-- Two class attributes will break things -->
<!-- BEFORE: <div class="card-news" class="d-none"> -->
<div class="card-news">
      
  <div style="display: none;" class="d-none">Part Time</div>
      
  <div style="display: none;" class="d-none">Employee</div>
      
  <div>Cindy</div>
      
</div>

我还做了一支CodePen，这样你就可以看到它的运行情况:Go to CodePen