itérer dans des éléments de formulaire imbriqués dans jQuery

Question

je suis désolé si cela a déjà été posté, je cherche en vain.

Je veux juste savoir comment passer en boucle dans les "éléments" de formulaire imbriqués (les éléments étant non seulement les éléments de formulaire stricts, tels que les balises d’entrée, mais également les 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')+"'"); 
    }
   });

cela ne fonctionne pas lorsque mon formulaire contient d'autres éléments tels que:

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

aidez s'il vous plaît ...

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());

MODIFIER : je viens de comprendre ce que vous essayez de faire et vous pouvez le décomposer en ceci

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 en savoir plus sur les sélecteurs de jQuery.

Answer 2

Vous pouvez utiliser contents () (et filtrer les nœuds de texte si nécessaire) ou find ('*') pour obtenir tous les éléments, même si 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

Je suis revenu pour me corriger :) jQuery Rocks! Donc, après un cours intensif, voici la même chose dans 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 css au cas où quelqu'un voudrait l'utiliser ...

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

Answer 4

Ne savez pas si vous avez besoin de jQuery, voir l'exemple de domIterator ci-dessous ...

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