Как преобразовать строку в объект и использовать внутри l oop javascript?

Question

У меня есть много div с идентификаторами в простом порядке, например: div1, div2, div3, div4 и так далее. Код HTML:

<div id='div1'>..abc..</div>
<div id='div2'>..def..</div>
<div id='div3'>..ghi..</div>
<div id='div4'>..jkl..</div>
<div id='div5'>..mno..</div>

Все они содержат разные фрагменты текста внутри. И теперь я хочу отсортировать div, в котором длина текста внутри равна 15. Для этого, я полагаю, есть два метода:

1. Раздельный анализ
2. Цикл

Я использовал отдельный анализ js код:

<script>
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var div3 = document.getElementById('div3');
    var div4 = document.getElementById('div4');
    var div5 = document.getElementById('div5');
    if (div1.value.length = 50){
      alert('div 1 sorted');
    }
    //like this for all of them
</script>

Мне понравилось это для всех пяти из них. до этого все было в порядке, но теперь я должен сделать это, предположим, что 100 div, поэтому я попытался использовать l oop здесь:

<script>
    var i = 0;
    while (i <= 100){
      var allDiv = 'div' + i;
      if(allDiv.value.length == 50){
        alert(allDiv+' sorted')
      }
      i += 1;
    }
</script>

Но это не сработало. Я думаю, когда функция if принимает allDiv.value как [div + i] здесь, как div1. Как сделать это объектом? также предложите любые изменения, которые я должен внести.

Answer 1

Используйте a для l oop

На каждой итерации получите div из DOM

Проверьте значение и длину с помощью innerText

Оповещать, если ваше условие выполнено

for (let i = 1; i < 6; i = i + 1) {
  const div = document.getElementById('div' + i);
  
  if (div && div.innerText.length === 15) {
    alert(`div ${i} has a length of 15`);
  }
}

<div id='div1'>aaaaa</div>
<div id='div2'>bbbbb</div>
<div id='div3'>ccccccccccccccc</div>
<div id='div4'>ddddd</div>
<div id='div5'>eeeee</div>

Еще более чистое решение

, если вы хотите сделать это проще, и вы можете изменить HTML. Я бы добавил класс к каждому div, чтобы выбрать их все по одному go и l oop через них. Таким образом, вам также не нужно сразу знать, сколько div находится на странице:

const allDivs = document.querySelectorAll('.div-to-select');

allDivs.forEach(div => {
  if (div.innerText.length === 15) {
    alert(`div with id ${div.id} has length 15`);
  }
});

<div id='div1' class="div-to-select">aaaaa</div>
<div id='div2' class="div-to-select">bbbbb</div>
<div id='div3' class="div-to-select">ccccccccccccccc</div>
<div id='div4' class="div-to-select">ddddd</div>
<div id='div5' class="div-to-select">eeeee</div>

Answer 2

Используйте циклы, вот пример

let i = 1;
for (i < 6; i +=  1) {
  const d = document.getElementById(``div + ${i}``);

  if (d && d.innerText.length === 15) {
    console.log(`division ${i} length is 15`);
  }
}

Answer 3

Попробуйте это.

<script>
    var i = 0;
    while (i <= 100){
      var allDiv = 'div' + i;
      if(document.getElementById(allDiv).innerHTML.length == 50){
        alert(allDiv+' sorted')
      }
      i += 1;
    }
</script>

Между прочим, это недопустимое выражение, это присвоение.

 if (div1.value.length = 50){
      alert('div 1 sorted');
 }

Правильно

if (div1.value.length == 50){
      alert('div 1 sorted');
 }

Go через это для лучшего понимания: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Сортировка и вопрос не кажутся логически правильными.