通過嵌套的表單元素jQuery的迭代

Question

對不起，如果這是已經發布我一直在尋找無果..

我只是想知道如何通過嵌套形式「元素」（元素是循環不僅嚴格的形式元素，如輸入標籤，但其他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> 

請幫助...

Answer 1

你可以做，在一個遞歸函數。

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的selectors。

Answer 2

你可以使用contents()（並根據需要篩選出文本節點）或find('*')以獲取所有元素，但我不喜歡使用通配符。

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

或

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

Answer 3

說不上來，如果你需要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 

Answer 4

回來後糾正自己:) jQuery的岩石！ 這裏速成班後，所以在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; 
}