перебирать вложенные элементы формы в jquery
Вопрос
Извините, если это уже было опубликовано, я искал безрезультатно.
Я просто хочу знать, как перебирать вложенные элементы формы (элементы являются не только элементами строгой формы, такими как теги ввода, но также и другие элементы HTML) в jquery. В настоящее время у меня есть этот кусок кода, чтобы сделать это:
$('#'+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')+"'");
}
});
это не работает, когда моя форма содержит другие элементы, подобные этому:
<form>
<div id='tabs'>
<ul>...</ul>
<div id='tab-1'>
<input type='text' id='fname' />
<textarea id='desc' ></textarea>
</div>
</div>
</form>
пожалуйста, помогите ...
Решение
Вы можете сделать это в рекурсивной функции.
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' <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);
}
}
А вот и CSS, если кто-то захочет использовать его ...
/*
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;
}
Не знаю, если вам нужен jQuery, см. пример domIterator ниже ...
/*
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