После того как мы освоили захват элементов DOM в одном из прошлых постов, посмотрим как можно перемещаться по группе захваченных элементов DOM. Для примера возьмем такую разметку…
|
1 2 3 4 5 6 7 8 9 10 |
... <div id="somediv">another div</div> <div id="parent"> <div id="child1" class='firstclass'>someContent1</div> <div id="child2" class='firstclass'>someContent2</div> <div id="child3" class='secondclass'>someContent3</div> <div id="child4" class='secondclass'>someContent4</div> </div> ... |
Обращение через item или [ ]
Известно, что группы элементов после захвата представляют из себя либо массивы (в результате метода Ext.query()) либо “композит” коллекции в результате метода Ext.select(). Композиты коллекции позволяют применять метод сразу ко всем элементам коллекции – без перебора в цикле.
Как обращаться к отдельным элементам “композитам” коллекций?
Захватим несколько элементов методом Ext.select();
|
1 |
var myelements=Ext.select('div.firstclass'); |
Тогда к конкретному элементу “композит” коллекции можно обратиться следующим образом
|
1 |
alert(myelements.item(0).getHtml()); //<<<Обращение к конкретному элементу через item |
Здесь мы использовали один из методов класса Ext.dom.Element, а именно getHtml. Все методы этого класса можно просмотреть в документации.
Как обращаться к отдельным элементам массивов?
|
1 2 |
var myelements=Ext.query('div',false,'parent'); alert(myelements[0].getHtml()); |
Обращение через next, prev
Если в результате методов захвата Ext.query(), Ext.select(), Ext.fly() мы получаем набор элементов класса Ext.dom.Element, то мы можем обращаться к ним при помощи методов класса Ext.dom.Element – next,prev,first,last. Рассмотрим на примере
|
1 2 3 4 5 6 7 8 9 10 |
var myElements=Ext.query('div',false,'parent'); // Получим массив элементов Ext.dom.Element var myElement=myElements[1]; alert(myElement.getHtml());//Выведет первый элемент массива myElement=myElement.prev(); alert(myElement.getHtml());//Выведет нулевой элемент массива myElement=myElement.next(); alert(myElement.getHtml());//Выведет первый элемент массива |
Обращение к дочерним элементам через first,last
Если у нас есть HTML элемент, который содержит в себе другие элементы, то мы можем обратиться к его первому или последнему элементам через first(), last();
|
1 2 3 4 5 6 7 8 |
//Получаем элемент, который содержит в себе дочерние элементы var myElement=Ext.get('parent'); myFirstElement=myElement.first(); alert(myLastElement.getHtml());//Выведет первый подчиненный элемент myLastElement=myElement.last(); alert(myLastElement.getHtml());//Выведет последний подчиненный элемент |
Обращение к родителям и детям
|
1 2 3 4 5 6 7 8 9 10 |
//Получаем элемент, который содержит в себе дочерние элементы var myElement=Ext.get('parent'); //Выдаст первого ребенка с указанным селектором var myFirstChild=myElement.child('div#child1'); alert(myFirstChild.getHtml()); //Выдаст родителя ребенка var myParent=myFirstChild.parent(); alert(myParent.getHtml()); |