itérer éléments emboîtées dans jquery

Question

im désolé si cela a été publié déjà que je cherchais en vain ..

Je veux juste savoir comment faire une boucle par « éléments » emboîtées (éléments étant non seulement la des éléments de forme stricts comme des balises d'entrée mais aussi d'autres éléments html) dans jquery. Actuellement j'ai ce morceau de code pour le faire:

$('#'+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')+"'"); 
    } 
    }); 

ne fonctionne pas lorsque ma forme contient d'autres éléments comme celui-ci:

<form> 
    <div id='tabs'> 
     <ul>...</ul> 
     <div id='tab-1'> 
       <input type='text' id='fname' /> 
       <textarea id='desc' ></textarea> 
     </div> 
    </div> 
</form> 

s'il vous plaît aider ...

Answer 1

Vous pouvez le faire dans une fonction récursive.

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: Je viens de comprendre ce que vous essayez de faire et vous pouvez le décomposer à cette

var p = {}; 
$('#'+arguments[i].formid + " input[id], #"+arguments[i].formid + " textarea[id]").each(function(){ 
    var child = $(this); 
    p[child.attr("id")] = child.attr("value"); 
}); 

Vous devriez probablement plus sur jQuery selectors.

Answer 2

Vous pouvez utiliser contents() (et filtrer les nœuds de texte si nécessaire) ou find('*') pour obtenir tous les éléments, bien que je n'aime pas l'utilisation de caractères génériques.

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

ou

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

Answer 3

J'sais si vous avez besoin jQuery, voir exemple ci-dessous 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

revins à moi corriger :) Rocks jQuery! Ainsi, après un cours de l'accident est la même chose ici ... 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); 
    } 
} 

Et voici le au cas où quelqu'un css veut faire usage ...

/* 
    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; 
}