training-web.ruГлавнаяКатегорииО насКарта сайтаПоискТёмная тема

Категории

Доступ к атрибутам дочерних и родительских элементов jquery

Создано: 26 декабря 2015Автор: Егор Астапов1812 просмотровСложность: легкий

Очень часто нужно внутри определённого блока переделать элементы. Вы можете каждому дочернему элементу присвоить свой уникальный id. В этом случае у вас будет большая масса id. Допустим у вас несколько блоков div и нужно в каждом изменить или получить определённые свойства. Блоков каждый раз может быть разное количество. Как быть в таком случае? Функция children() получает набор элементов, содержащий всех непосредственных уникальных потомков для каждого совпавшего элемента.


<div id='advertising'>
      <div id='box'>блок1</div>
      <div id='box'>блок2</div>
      <div id='box'>блок3</div>
</div>

Допустим нужно получить текст первого блока. Функция вернёт в нашем случае массив объектов. Вы можете обратиться к элементу массива по ключу (индексу).


var box =  $("#advertising").children();
box.css({"background-color":"green"});
console.log(box);
// вывод: Object[div, div, div]
console.log(box[0].innerText);
//вывод: блок1

Если нужно понять какой родительский элемент у наших дочерних элементов, то нужно использовать функцию parent(). Функция parent() получает прямого «родителя» элемента.


var main_box =  $("#box").parent();
console.log(main_box);
// вывод: Object[div#advertising]

Вы можете обойти DOM-дерево и изменить значение каждого тега div. Смотрите статью обход DOM-дерева jquery.

Комментарии

реклама