问题
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 strict form elements like input tags but other html elements as well) in jquery. Currently i have this piece of code to do it:
$('#'+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')+"'");
}
});
it does not work when my form contains other elements like this:
<form>
<div id='tabs'>
<ul>...</ul>
<div id='tab-1'>
<input type='text' id='fname' />
<textarea id='desc' ></textarea>
</div>
</div>
</form>
please help...
回答1:
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.
回答2:
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(...);
回答3:
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;
}
回答4:
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
来源：https://stackoverflow.com/questions/1617694/iterate-through-nested-form-elements-in-jquery