Я просмотрел почти каждый вопрос, который здесь задавали о htmlcollection.
Итак, у меня есть div, и я извлекаю данные и создаю div внутри этого div с помощью ajax, чтобы они не были жестко закодированы.
вот как выглядит div до получения данных
<div id = "tivvits"></div>
так выглядит div#tivvits после вызова функции show_all_tivvits(); show_all_tivvits() — это функция, в которой я создаю запрос ajax и создаю новые элементы div. например, div#tivvit-21, div#tivvit-22 и т. д.
<div id = "tivvits">
<div id = "tivvit-19" class = "grid-container">...</div>
<div id = "tivvit-20" class = "grid-container">...</div>
</div>
это часть файла js
document.addEventListener("DOMContentLoaded", function(){
show_all_tivvits();
var t = document.getElementById('tivvits');
const j = t.getElementsByClassName("grid-container");
const k = Array.prototype.slice.call(j)
console.info(k);
for (var i = 0; i < k.length; i++) {
console.info(k[i]);
}
});
то, что я хотел сделать в функции show_all_tivvits(), это то, что я хочу получить div, которые уже находятся в div#tivvits, и таким образом я не собираюсь создавать их снова, но проблема в том, что когда я использую console.info()
для распечатки document.getElementById('tivvits').getElementsByClassName('grid-container')
есть элементы в коллекции html, но когда я распечатываю длину, она возвращает 0.
еще одна вещь, когда я открываю inspect> source в chrome, мой index.php не имеет обновленных div # tivvits. Я пробовал почти каждый способ зациклить эту htmlколлекцию, но она не работает.
список вещей, которые я пробовал;
Array.from(links)
Array.prototype.slice.call(links)
[].forEach.call(links, function (el) {...});
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype.forEach = Array.prototype.forEach;
Просто используйте let links = document.querySelectorAll(".grid-container"); links.forEach(link => {console.info(link)})
@ Алекс, я думал, что раз уж они дети div#tivvits, то я так и сделал. Итак, вы предполагаете, что я могу сделать document.getElementsByClassName('grid-container')
правильно?
imo вы должны создать объект tivvits
, который имеет методы get, render, show, а затем сохранить значения/компонент в массиве, который вы можете проверить перед рендерингом, вы пытаетесь сделать слишком много в одной или двух функциях
Нет, я бы сказал, используйте что-то вроде того, что ptohtep упомянул document.querySelectorAll, будет хорошо работать
Поскольку функция show_all_tivvits
выполняет запрос AJAX, код, следующий за вызовом функции, возвращает HTML до того, как можно будет добавить ответ. Это означает, что внутри вашего целевого div нет узлов. Что вам нужно сделать, так это взять код после вызова функции и поместить его в функцию, которую вы можете использовать в качестве обратного вызова для ответа AJAX. В зависимости от того, как отправляется запрос AJAX, вам необходимо определить, как определить обратный вызов (или обратный вызов успеха) для вашего ответа.
Попробуйте это
Я использую оператор распространения, чтобы разрешить использование карты в HTMLCollection.
window.addEventListener("load", function() {
const gridContainers = document.querySelectorAll("#tivvits .grid-container");
const ids = [...gridContainers].map(div => div.id);
console.info(ids)
});
<div id = "tivvits">
<div id = "tivvit-19" class = "grid-container">...</div>
<div id = "tivvit-20" class = "grid-container">...</div>
</div>
Чтобы просто отображать изменения
const ids = [...gridContainers].map(div => div.id);
к
[...gridContainers].forEach(div => console.info(div.id));
Я попробовал ваш ответ, и я жестко закодировал div # tivvit-19 и div # tivvit-20, и это сработало, но, поскольку они на самом деле не жестко закодированы, документ не может их видеть.
<div id = "tivvits"></div>
изначально пуст, затем в прослушивателе событий загрузки я вызываю функцию show_all_tivvits(), которая делает запрос ajax, и я создаю div#tivvit-19, div#tivvit-20 и т. д. внутри div#tivvits.
Пожалуйста, обновите свой вопрос тем, что вы ДЕЙСТВИТЕЛЬНО хотите сделать, так как я думаю, что вы слишком усложняете себе задачу.
но это на самом деле то, что я хочу сделать, хотя
Не совсем понятно, но вы ищете что-то подобное?
targets = document.querySelectorAll('#tivvits > .grid-container')
for (let target of targets)
{console.info(target.id)}
Это должно выбрать все узлы <div>
, которые являются прямыми дочерними элементами узла <div id = "tivvits">
и имеют атрибут class
со значением "grid-container"
, и извлечь из них значение атрибута id
.
почему по id, а также по классу? Это вообще не имеет смысла