romasovest
@romasovest
~

Как изменить не прямого потомка на чистом js?

Есть такой код, например:

HTML:
<div class="div-class-0" attr="аттрибут 1-го div">
	<div class="div-class-1">
		<span class="span-class" attr="аттрибут 1-го span"></span>
	</div>
</div>
<div class="div-class-0" attr="аттрибут 2-го div">
	<div class="div-class-1">
		<span class="span-class" attr="аттрибут 2-го span"></span>
	</div>
</div>
<div class="div-class-0" attr="аттрибут 3-го div">
	<div class="div-class-1">
		<span class="span-class" attr="аттрибут 3-го span"></span>
	</div>
</div>


JS:
$(function(){
	var str = "";
	$(".div-class-0").each(function(i,e){
		console.log($(this).attr("attr")+" / "+$(this).find(".span-class").attr("attr"));
	});
});


На выходе получается:
аттрибут 1-го div / аттрибут 1-го span
аттрибут 2-го div / аттрибут 2-го span
аттрибут 3-го div / аттрибут 3-го span

Как сделать то же самое, но без jQuery? А именно, интересует как качественно заменить .find().

Не хочу использовать querySelectorAll(), потому что беспокоюсь за строгость наследования. Я хочу быть уверен, что в каждой строке на выходе я увижу атрибуты от div'a и span'a, которые 100% относятся к одному блоку.

И еще возможно я зря переживаю и действительно вот такое решение вполне сгодится:

var divclass0_arr = document.querySelectorAll(".div-class-0");
var spanclass_arr = document.querySelectorAll(".span-class");
for(i=0;i<divclass0_arr.length;i++){
	console.log(divclass0_arr[i].getAttribute("attr")+" / "+spanclass_arr[i].getAttribute("attr"));
}

Но что-то мне подсказывает, что оно очень хрупкое, чуть что не так с селекторами и все посыплется.
  • Вопрос задан
  • 472 просмотра
Решения вопроса 1
Если сомвераетесь, то воспользуйтесь youmightnotneedjquery.com там есть решение + альтарнатива
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы