querySelectorAll Need to select all divs-CodePudding

I'm in need of getting a working search bar for these cards (only one included in the code to save space), the js I've been using worked fine for now, but recently I had to add a new div (with class sce-all) which made it search only some of the items or actually too many from different divs and makes the other info into display:none when I search for anything from div (with class sce-e). When I try to search anything right now, it also searches from div (with class sce-e), I only need it to search from div (with class sce-tt) or it could be both, but it gives it the display:none tag currently. I tried changing up the ('.card div:nth-child(2)') in the js which is the cause of the problem it seems. Thanks for any help

const searchEl = document.querySelector('.searchbox');
const x = document.querySelectorAll('.card div:nth-child(2)');

function search(e) {
  x.forEach((item, index) => {
    if (!item.innerHTML.toLowerCase().includes(e.target.value)) {
      item.parentElement.style.display = 'none';
    } else {
      item.parentElement.style.display = 'block';
    }
  })
}

searchEl.addEventListener("keyup", search);

<form class='searchbox'>
  <input  type="text" placeholder="Search.." name="search">
</form>

<div >
  <div >

    <div >
      <div >
        <div >
          <a href="vid.mp4"><video preload="metadata">
            <source src="vid.mp4#t=139" type="video/mp4">
          </video></a>
        </div>
      </div>
      <div >
        <div ><a href="none">Link Title</a><span >0ms</span></div>
        <div >Title</div>
      </div>
      <div >
        <div ><a><span >Main</span></a><span ><a href="vid.mp4">ENG</a></span></div>
        <hr >
        <div >Info<span ></span>0h 46m<span ></span>2023</div>
      </div>
    </div>

  </div>
</div>

CodePudding user response：

Change x to just select the .sce-tt divs. Then when it decides whether to hide or show the parent, use closest('.card') to find the containing card, rather than specifying .parent.

const searchEl = document.querySelector('.searchbox');
const x = document.querySelectorAll('.card .sce-tt');

function search(e) {
  x.forEach((item, index) => {
    if (!item.innerHTML.toLowerCase().includes(e.target.value)) {
      item.closest(".card").style.display = 'none';
    } else {
      item.closest(".card").style.display = 'block';
    }
  })
}

searchEl.addEventListener("keyup", search);

<form class='searchbox'>
  <input  type="text" placeholder="Search.." name="search">
</form>

<div >
  <div >

    <div >
      <div >
        <div >
          <a href="vid.mp4"><video preload="metadata">
            <source src="vid.mp4#t=139" type="video/mp4">
          </video></a>
        </div>
      </div>
      <div >
        <div ><a href="none">Link Title</a><span >0ms</span></div>
        <div >Title</div>
      </div>
      <div >
        <div ><a><span >Main</span></a><span ><a href="vid.mp4">ENG</a></span></div>
        <hr >
        <div >Info<span ></span>0h 46m<span ></span>2023</div>
      </div>
    </div>

  </div>
</div>

CodePudding user response：

You can use closest(), with this you can have any element as children looping because it will lookup the closest parent with class/Id (in this case .card) you put as parameter, and as I said in my comment to your question you could use const x = document.querySelectorAll('.sce-tt') or const x = document.querySelectorAll('.sce-all')

const searchEl = document.querySelector(".searchbox");
const x = document.querySelectorAll(".sce-tt");

function search(e) {
  x.forEach(
    item =>
    (item.closest(".card").style.display = !item.innerHTML
      .toLowerCase()
      .includes(e.target.value) ?
      "none" :
      "block")
  );
}

searchEl.addEventListener("keyup", search);

<form >
  <input  type="text" placeholder="Search.." name="search" />
</form>

<div >
  <div >
    <div >
      <div >
      </div>
      <div >
        <div >
          <a href="none">Link Title</a><span >0ms</span>
        </div>
        <div >Title</div>
      </div>
      <div >
        <div >
          <a><span >Main</span></a
          ><span ><a href="vid.mp4">ENG</a></span>
        </div>
        <hr  />
        <div >
          Info<span ></span>0h 46m<span ></span
          >2023
        </div>
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <div >
          <a href="none">Link test</a><span >0ms</span>
        </div>
        <div >test</div>
      </div>
      <div >
        <div >
          <a><span >Main</span></a
          ><span ><a href="vid.mp4">ENG</a></span>
        </div>
        <hr  />
        <div >
          Info<span ></span>0h 46m<span ></span
          >2023
        </div>
      </div>
    </div>
  </div>
</div>