تكرار خلال عناصر النموذج المتداخلة في مسج
https://stackoverflow.com/questions/1617694
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
وايم آسف إذا كان نشر هذا بالفعل، لقد كنت تبحث دون جدوى ..
وأريد فقط أن أعرف كيفية يتكرر خلال متداخلة شكل "العناصر" (عناصر يجري ليس فقط على شكل عناصر صارمة مثل علامات المدخلات ولكن عناصر 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");
});
وربما يجب عليك قراءة المزيد عن مسج محددات .
نصائح أخرى
ويمكنك استخدام محتويات () (ووتصفية النص العقد إذا لزم الأمر) أو <ل أ href = "http://docs.jquery.com/Traversing/find#expr" يختلط = "noreferrer"> العثور على ( '*') للحصول على جميع العناصر، على الرغم من أنني لا يروق لك استخدام أحرف البدل.
$('form').contents()
.filter( function() { return this.nodeType == 1; } )
.each(...);
أو
$('form').find('*')
.each(...);
وعاد لتصحيح نفسي :) مسج الصخور! وذلك بعد دورة مكثفة هنا هو نفس الشيء في مسج ...
/*
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);
}
}
وهنا هو المغلق في حالة أي شخص يريد الاستفادة منه ...
/*
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;
}
ودونو إذا كنت في حاجة إلى مسج، انظر 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
لا تنتمي إلى StackOverflow
