iterate through nested form elements in jquery

Question

im sorry if this was posted already i have been looking to no avail..

I just want to know how to loop through nested form \'elements\' (elements being not only the s

Answer 1

You can use contents() (and filter out text nodes if needed) or find('*') to get all elements, though I dislike the use of wildcards.

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

or

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

Answer 2

You can do that in a recursive function.

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());

EDIT: I just figured out, what you are trying to do and you can break it down to this

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

You should probably read more about jQuery selectors.

Answer 3

Dunno if you need the jQuery, see domIterator example below ...

/*
    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

Answer 4

Came back to correct myself :) jQuery Rocks! So after a crash course here is the same thing in 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);
  }
}

And here is the css in case anyone wants to make use of it ...

/*
    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;
}