Обход DOM один за другим, используя jquery - PullRequest
Новая
       7

Обход DOM один за другим, используя jquery

5 голосов
/ 09 сентября 2010

Я хотел пройти узел за узлом на веб-странице, сохранив последовательность.

например. Ниже приведен базовый DOM: 

<BODY>
     <DIV id ='1'> Test 1 </DIV>
     <DIV id='2'> Details about <SPAN id='3'> Execution </SPAN> </DIV>   
</BODY>

В соответствии с приведенным выше примером, я хочу пройти каждый узел по узлу, т.е. 

1st Traversal : <BODY>

2nd Traversal : <DIV id ='1'>

3rd Traversal : <DIV id='2'>

4rd Traversal : <SPAN id='3'>

Мой мотив состоит в том, чтобы перебирать все узлы, доступные на текущей странице, и посещать каждый узел один за другим, говоря просто nextnode (), обходя при этом обход не глядя на родительские и дочерние отношения. Ожидается, что он должен посещать каждый узел в следующей последовательности.

Так что мое утверждение будет таким: 

startnode //consider this is start node

While ( startnode!=null ) {

  // will process on startnode

   startnode= startnode->nextnode();
  // something like that to visit each node
}

Кто-нибудь знает об этом, как этого добиться, используя jquery (предпочтительно) или javascript, поделитесь пожалуйста своими ссылками.

Спасибо

-Pravin

Ответы [ 3 ]

14 голосов
/ 09 сентября 2010

Всегда есть стандартный метод Крокфорда прогулки по дому .

Пример: http://jsfiddle.net/FJeaY/

var walk_the_DOM = function walk(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walk(node, func);
        node = node.nextSibling;
    }
};

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1)
        alert(node.id);  // alert if we have a type 1 node
})​;​

Пример кода walk_the_DOM, скопированный отсюда: http://snipplr.com/view/19815/walking-the-dom/

РЕДАКТИРОВАТЬ: Текстовые узлы имеют nodeType = 3, так что вы можете добавить это в свой оператор if(), если они также желательны. 

walk_the_DOM(document.body, function(node) {
    if(node.nodeType == 1 || node.nodeType == 3)
        alert(node.id);  // ID will be undefined if it is a text node
})​;​
12 голосов
/ 09 сентября 2010

Вы можете перебрать тело и весь селектор , например: 

$("body").find("*").andSelf().each(function() {
    alert(this.nodeName); //alerts body, div, div, span
});​

Примечание : andSelf устарело и теперь является псевдонимом для addBack(), который следует использовать с jQuery 1.8 и более поздними версиями

Вы можете попробовать его здесь , часть body означает, что вы не получите <head>, его содержимое и т. Д.

1 голос
/ 09 сентября 2010

Simple. 

function walk(node, fn) {
    if (node) do {
        fn(node);
        if (node.nodeType === 1) walk(node.firstChild, fn);
    } while (node = node.nextSibling);
}

Использование: 

walk(document.body, function(){
    // do something with `this`
    // e.g.
    alert(this.id);
});

И чтобы избежать неэлементных узлов, это будет работать: 

function walk(node, fn) {
    if (node) do {
        if (node.nodeType === 1) {
            fn(node);
            walk(node.firstChild, fn);
        }
    } while (node = node.nextSibling);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...