iteração através de elementos de forma hierárquica em jquery

Question

im desculpe se isso já foi postado eu tenho procurado sem sucesso ..

Eu só quero saber como fazer um loop através de forma hierárquica 'elementos' (elementos sendo não só os elementos de formulário estritas como tags de entrada, mas outros elementos HTML também) em jQuery. Atualmente tenho este pedaço de código para fazê-lo:

$('#'+arguments[i].formid).children().each(function(){ 
    var child = $(this);
    alert(child.attr('id'));
    if(child.is(":input")) { alert(child.attr('id'));
     if(child.attr('id')!='') eval("p."+child.attr('id')+"='"+child.attr('value')+"'"); 
    }

       if(child.is(":textarea")) {
     if(child.attr('id')!='')  eval("p."+child.attr('id')+"='"+child.attr('value')+"'"); 
    }
   });

não funciona quando meu formulário contém outros elementos como esta:

<form>
    <div id='tabs'>
        <ul>...</ul>
        <div id='tab-1'>
               <input type='text' id='fname' />
               <textarea id='desc' ></textarea>
        </div>
    </div>
</form>

Por favor, ajudem ...

Answer 1

Você pode fazer isso em uma função recursiva.

function doStuff(child) {
  if(child.is(":input")) {
     ...
  }

  if(child.is(":textarea")) {
    ...
  }
}

function walk(children) {
  if (typeof children == "undefined" || children.size() === 0) {
    return;
  }
  children.each(function(){
    var child = $(this);
    if (child.children().size() > 0) {
      walk(child.children());
    }
    doStuff(child);
  }
}

walk($('#'+arguments[i].formid).children());

Editar : Eu só descobri, o que você está tentando fazer e você pode quebrá-lo para baixo a este

var p = {};
$('#'+arguments[i].formid + " input[id], #"+arguments[i].formid + " textarea[id]").each(function(){
  var child = $(this);
  p[child.attr("id")] = child.attr("value");
});

Você provavelmente deve ler mais sobre jQuery seletores .

Answer 2

Você pode usar conteúdos () (e filtrar os nós de texto se necessário) ou find ( '*') para obter todos os elementos, embora eu não gosto do uso de curingas.

 $('form').contents()
          .filter( function() { return this.nodeType == 1; } )
          .each(...);

ou

 $('form').find('*')
          .each(...);

Answer 3

Veio para me corrigir :) Rochas jQuery! Então, depois de um acidente de curso aqui é a mesma coisa em jQuery ...

/*
    menu.jq     : main menu jQuery for ekerner.com
    Author      : 'Eugene Kerner' <ekerner@ekerner.com>
    Date        : 16-12-2009
    Dependencies: jQuery javascript lib
                : menu.css
                : an unordered list structure as per the below Example.
                : a javascript call to menu.init(menuId, selectedMenuItemsArray) as per the below Example.
    Notes       : if your menu link has an onclick that returns false then it needs to call menu.init before returning (see Example).
    Example     : -
    <ul id="mainMenu" class="menuItems">
      <li>
        <a href="/">Menu Item</a>
        <ul>
          <li><a href="/webpage" onclick="window.open('/webpage'); menu.init('mainMenu', ['Menu Item', 'Sub Menu Item']); return false;">Sub Menu Item</a></li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">$(document).ready(function(){menu.init('mainMenu', ['Menu Item'])});</script>
*/

var menu = {
  selectedClass : 'selected',
  animateSpeed  : 'fast',
  selectedLinks : [],
  init : function(menuId, selectedLinks)
  {
    $('#' + menuId).children('li').each(function(){
      var menuItem       = $(this);
      var menuLink       = menuItem.children('a:first-child');
      var subMenu        = menuItem.children('ul:last-child');
      menu.selectedLinks = selectedLinks;
      menu.applySelectedClass(menuLink);
      if (subMenu.length == 1) {
        menuItem.hover(
          function(){menuLink.addClass(menu.selectedClass); subMenu.slideDown(menu.animateSpeed)}, 
          function(){subMenu.slideUp(menu.animateSpeed); menu.applySelectedClass(menuLink)}
        );
        subMenu.find('a').each(function(){menu.applySelectedClass($(this))});
      }
    });
  },
  applySelectedClass : function(menuLink)
  {
    ($.inArray(menuLink.html(), menu.selectedLinks) > -1) ? menuLink.addClass(menu.selectedClass) : menuLink.removeClass(menu.selectedClass);
  }
}

E aqui está o css no caso de alguém quiser fazer uso dele ...

/*
    menu.css - main menu cascading style sheet for ekerner.com all media
    'Eugene Kerner' <ekerner@ekerner.com>
    14-12-2007
*/

.menuItems, .menuItems li, .menuItems li ul, .menuItems li ul li {
  padding: 0;
  margin: 0;
}
.menuItems, .menuItems li ul {
  list-style: none;
}
.menuItems {
  background: url(/shared/images/menu/menu_button_bg.png) repeat-x;
  height: 30px;
}
.menuItems:after { 
  content: ".";
  height: 0; 
  clear: both; 
  display: none;
}
.menuItems li {
  width: 80px;
  float: left;
}
.menuItems li a {
  color: #0d2a86;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  height: 24px;
  padding-top: 6px;
  border-right: 1px solid #f3f3f3;
  display: block;
}
.menuItems li a:hover, .menuItems li .selected {
  background: url(/shared/images/menu/menu_button_bg_selected.png) repeat-x;
  color: #518ed3;
}
.menuItems li ul {
  position: absolute;
    z-index: 100;
    border: 1px solid #e0e7ef;
    border-top: 0;
  display: none;
}
.menuItems li ul li {
  width: 77px;
  clear: both;
}
.menuItems li ul li a {
  background: #f3f3f3;
  font-size: 12px;
  font-weight: normal;
  height: 18px;
  padding: 0;
  padding-top: 2px;
  border: 0;
}
.menuItems li ul li a:hover, .menuItems li ul li .selected {
  background: #e0e7ef;
}
.visible {
  display: block;
}
.hidden {
  display: none;
}

Answer 4

Não sei se você precisa do jQuery, veja o exemplo domIterator abaixo ...

/*
    menu.js     : main menu javascript class for ekerner.com
    Author      : 'Eugene Kerner' <ekerner@ekerner.com>
    Date        : 14-12-2007
    Dependencies: menu.css
                : an unordered list structure as per the below Example.
                : a javascript call to menu.init(menuId, selectedMenuItemsArray) as per the below Example.
    Notes       : if your menu link has an onclick that returns false then it needs to call menu.init before returning (see Example).
    Example     : -
    <ul id="mainMenu" class="menuItems">
      <li>
        <a href="/">Menu Item</a>
        <ul>
          <li><a href="/webpage" onclick="window.open('/webpage'); menu.init('mainMenu', ['Menu Item', 'Sub Menu Item']); return false;">Sub Menu Item</a></li>
        </ul>
      </li>
    </ul>
    <script type="text/javascript">menu.init('mainMenu', ['Menu Item']);</script>
*/

var menu = {

  selectedItems : [],

  init : function(menuId, selectedMenuItems)
  {
    this.selectedItems = selectedMenuItems;
    var menuItem = domIterator.getFirstChild(document.getElementById(menuId));
    while (menuItem) {
      var menuItemLink = domIterator.getFirstChild(menuItem);
      var subMenu      = domIterator.getNextSibling(menuItemLink);
      this.applySelectedClass(menuItemLink);
      if (subMenu) {
        menuItem.onmouseover = function(){menu.showSubMenu(this)};
        menuItem.onmouseout  = function(){menu.hideSubMenu(this)};
        var subMenuLinks = subMenu.getElementsByTagName('a');
        for (var i = 0; i < subMenuLinks.length; i++)
          this.applySelectedClass(subMenuLinks[i]);
      }
      menuItem = domIterator.getNextSibling(menuItem);
    }
  },

  applySelectedClass : function(menuLink)
  {
    for (var i = 0; i < this.selectedItems.length; i++) {
      if (menuLink.innerHTML == this.selectedItems[i]) {
        menuLink.className = 'selected';
        return;
      }
    }
    menuLink.className = '';
  },

  showSubMenu : function(menuItem)
  {
    domIterator.getFirstChild(menuItem).className     = 'selected';
    domIterator.getLastChild (menuItem).style.display = 'block';
  },

  hideSubMenu : function(menuItem)
  {
    domIterator.getLastChild (menuItem).style.display = 'none';
    this.applySelectedClass(domIterator.getFirstChild(menuItem));
  }

}; // end menu

var domIterator = {

  getFirstChild : function(elem)
  {
    if (elem) return domIterator.continueUntilType1(elem.firstChild, 'next');
  },

  getLastChild : function(elem)
  {
    if (elem) return domIterator.continueUntilType1(elem.lastChild, 'previous');
  },

  getNextSibling : function(elem)
  {
    if (elem) return domIterator.continueUntilType1(elem.nextSibling, 'next');
  },

  continueUntilType1 : function(elem, direction) 
  {
    while (elem && elem.nodeType != 1)
      elem = elem[direction + 'Sibling'];
    return elem;
  }

}; // end domIterator