Hello! Can you please tell me how to javascript without using jQuery to iterate over the HTML content inside the span depending on the number of blocks div class="column" ?

In other words: there is a variable var number = 'Один'; . It is necessary to compare it with the contents of the HTML block, and if there is a coincidence, then return the entire block with the exception of elements that have not slept with the template.

I take a cycle:

  content = document.getElementsByClassName('column'); for(var i = 0; i < column.length; i++) { console.log(column.item(i)); }

In this case, the loop runs twice. We get two <div class="column">...</div> objects that need to be iterated too. But how?

HTML code:

  <div class="column"> <div class="category"> <div> <h3> <a href="#"> <span>Один</span> </a> </h3> <h3> <a href="#"> <span>Два</span> </a> </h3> <h3> <a href="#"> <span>Три</span> </a> </h3> </div> </div> </div> <div class="colum"> <div class="category"> <div> <h3> <a href="#"> <span>Четеры</span> </a> </h3> <h3> <a href="#"> <span>Один</span> </a> </h3> <h3> <a href="#"> <span>Шесть</span> </a> </h3> </div> </div> </div>

Thank!

Ps masked var number = 'Один'; there should be an expression from two blocks (since both there and there the word "One" is present):

  <div class="column"> <div class="category"> <div> <h3> <a href="#"> <span>Один</span> </a> </div> </div> </div> <div class="column"> <div class="category"> <div> <h3> <a href="#"> <span>Один</span> </a> </div> </div> </div>
  • Give an example of what needs to be found, but something is unclear what and in what form it is necessary to return. - user207618 8:04 pm
  • @Other Added to the question! - Pavel

1 answer 1

Your second root node has a class colum , which is probably an error.

 let word = 'Один'.toLowerCase(); Array.from(document.querySelectorAll('.column')).forEach(e => { // Проверяем все h3 текущего .column на предмет наличия word; если нету - удаляем ноду Array.from(e.querySelectorAll('h3')).forEach(e => !e.innerHTML.toLowerCase().includes(word) ? e.remove() : null); // Если после проверки контейнер пуст - удаляем ноду (как в случае 3) if(e.querySelector('h3') === null) e.remove(); }); 
 <div class="column"> <div class="category"> <div> <h3> <a href="#"> <span>Один</span> </a> </h3> <h3> <a href="#"> <span>Два</span> </a> </h3> <h3> <a href="#"> <span>Три</span> </a> </h3> </div> </div> </div> <div class="column"> <div class="category"> <div> <h3> <a href="#"> <span>Четеры</span> </a> </h3> <h3> <a href="#"> <span>Один</span> </a> </h3> <h3> <a href="#"> <span>Шесть</span> </a> </h3> </div> </div> </div> <div class="column"> <div class="category"> <div> <h3> <a href="#"> <span>Четеры</span> </a> </h3> <h3> <a href="#"> <span>Пять</span> </a> </h3> <h3> <a href="#"> <span>Шесть</span> </a> </h3> </div> </div> </div>

  • PS Not knowing, script in ES6 - Invision
  • @Invision, JS as the Creator is one. So what's the difference then? - user207618 pm
  • @Other Thanks for the reply! Again you will have to translate your code into a human-readable one)) - Pavel
  • @Pavel, which is unclear - ask, although I’m kind of like I’ve written comments :) - user207618
  • @Other tell me, please, and how to do so as not to touch the current html code so that the result of the filter is cloned into another div ? Those. the whole structure is inserted into the created <div id="insert"></div> , and the current elements for which the comparison is being made remain unchanged. - Pavel