jquery에서 중첩된 양식 요소를 반복합니다.
문제
이 글이 이미 게시되었다면 죄송합니다. 아무 소용이 없었습니다..
jquery에서 중첩된 양식 '요소'(입력 태그와 같은 엄격한 양식 요소뿐만 아니라 다른 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')+"'");
}
});
내 양식에 다음과 같은 다른 요소가 포함되어 있으면 작동하지 않습니다.
<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에 대해 더 많이 읽어야 할 것입니다 선택기.
다른 팁
나 자신을 바로 잡기 위해 돌아왔다 :) 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;
}
Dunno jQuery가 필요한 경우 아래의 도메이터 예제를 참조하십시오 ...
/*
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
제휴하지 않습니다 StackOverflow