迭代jquery中的嵌套表单元素
我很抱歉，如果这已经发布我一直在寻找无济于事..
我只是想知道如何在jquery中循环嵌套表单’elements’（元素不仅是输入标签之类的严格表单元素，还包括其他html元素）。 目前我有这段代码来做：
$('#'+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')+"'"); } }); 当我的表单包含这样的其他元素时，它不起作用：
请帮忙…
你可以在递归函数中做到这一点。
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());
编辑 ：我刚想通了，你想要做什么，你可以把它分解为这个
var p = {}; $('#'+arguments[i].formid + " input[id], #"+arguments[i].formid + " textarea[id]").each(function(){ var child = $(this); p[child.attr("id")] = child.attr("value"); });
您应该阅读有关jQuery 选择器的更多信息。
您可以使用contents（） （并在需要时过滤掉文本节点）或find（’*’）来获取所有元素，但我不喜欢使用通配符。
$('form').contents() .filter( function() { return this.nodeType == 1; } ) .each(...);
要么
$('form').find('*') .each(...);
回来纠正自己:) jQuery Rocks！ 所以在一个速成课程之后，这里的jQuery是同样的事情……
/* menu.jq : main menu jQuery for ekerner.com Author : 'Eugene Kerner' 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 : - */ 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); } }
这是css以防万一有人想利用它…
/* menu.css - main menu cascading style sheet for ekerner.com all media 'Eugene Kerner' 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; }
Dunno如果你需要jQuery，请参阅下面的domIterator示例…
/* menu.js : main menu javascript class for ekerner.com Author : 'Eugene Kerner' 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 : - */ 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