Помогите обернуть ссылки в список?
несилен пока в яваскрипте, а полный jquery тяжоловат чтобы использоваит, пытаюсь достичь того же без .wrap().
Есть такая структура: <fieldset> <legend> Legenda </legend> <a> картинка текст </a> <a> картинка текст </a> <a> картинка текст </a> </fieldset> живьем:
<fieldset id="X40" widgettype="group" class="groupBox" style="height:183px; width:100%; left:0; padding:0;">
<legend id="X40Legend" style="">
<span class="caption" id="X40Caption">Selected Items</span>
</legend>
<span id="X42" type="label" style="">Your cart is currently empty.</span>
<a buttonid="201" id="X43Border" href="javascript:tpzDrillTable('', 'View Cart/Checkout', '201','',true)" title="View Cart/Checkout" tabindex="" content="View Cart/Checkout" style="text-align:left;position:absolute; overflow:hidden; top:49px; left:3.5%; width:91.2%; height:29px;">
<img class="HoverImage" id="X43" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tproceed.gif" alt="View Cart/Checkout" title="View Cart/Checkout" enabled="1" style="">View Cart/Checkout
</a>
<a buttonid="202" id="X45Border" href="javascript:tpzDrillTable('', 'Save your Cart for later', '202','',true)" title="Save your Cart for later" tabindex="" content="Save your Cart for later" style="text-align:left;position:absolute; overflow:hidden; top:82px; left:3.5%; width:91.2%; height:29px;">
<img class="HoverImage" id="X45" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tsave.gif" alt="Save your Cart for later" title="Save your Cart for later" enabled="1" style="opacity:1;">Save your Cart for later
</a>
<a buttonid="203" id="X47Border" href="javascript:tpzDrillTable('', 'Save your Cart as a Template', '203','',true)" title="Save your Cart as a Template" tabindex="" content="Save your Cart as a Template" style="text-align:left;position:absolute; overflow:hidden; top:115px; left:3.5%; width:91.2%; height:29px;">
<img class="HoverImage" id="X47" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tsave_li.gif" alt="Save your Cart as a Template" title="Save your Cart as a Template" enabled="1" style="opacity:1;">Save your Cart as a Template
</a>
<a buttonid="3" id="X48Border" href="javascript:tpzDrillTable('', 'Cancel', '3','',true)" title="Cancel" tabindex="" content="Cancel" style="text-align:left;position:absolute; overflow:hidden; top:148px; left:3.5%; width:91.2%; height:29px;">
<img class="HoverImage" id="X48" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tcancel.gif" alt="Cancel" title="Cancel" enabled="1" style="opacity:1;">Cancel
</a>
</fieldset>
я хочю получить такое: <fieldset> <legend> Legenda </legend> <div> <ul> <li> <a> картинка текст </a> </li> <li> <a> картинка текст </a> </li> <li> <a> картинка текст </a> </li> </ul> </div> </fieldset> как такое можно сделать а то уже голову сломал :( весь день мучаюсь :( тоесть "обернуть" все ссылки дивом, а каждую ссылку в елемент списка, чтоб нормальным столбиком вывелось (точки думаю убрать стилями) для меня засада как вставить открывющий тэг для дива и закрывающий а так же обернуть ссылки в <ul><li></li></ul> |
Не изящно, но должно работать:
var links = document.querySelectorAll('fieldset a'),
field = document.getElementsByTagName('fieldset')[0],
linkTemp = '',
div = document.createElement('div');
for(var i=0, l=links.length; i<l; i++) {
linkTemp += '<li>' + links[i].outerHTML + '</li>';
links[i].outerHTML = '';
}
div.innerHTML = '<ul>' + linkTemp + '</ul>';
field.appendChild(div);
|
заглянем в недра jquery: как видно из реализации, в цикле (each) перед каждым нужным элементом вставляется элемент, в который будет оборачиваться (insertBefore), а затем в него помещается сам элемент (appendChild)
wrap: function( html ) {
var isFunction = jQuery.isFunction( html );
return this.each(function(i) {
jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
});
},
...
wrapAll: function( html ) {
if ( jQuery.isFunction( html ) ) {
return this.each(function(i) {
jQuery(this).wrapAll( html.call(this, i) );
});
}
if ( this[0] ) {
// The elements to wrap the target around
var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);
if ( this[0].parentNode ) {
wrap.insertBefore( this[0] );
}
wrap.map(function() {
var elem = this;
while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
elem = elem.firstChild;
}
return elem;
}).append( this );
}
return this;
},
...
isFunction: function( obj ) {
return jQuery.type(obj) === "function";
},
...
type: function( obj ) {
return obj == null ?
String( obj ) :
class2type[ core_toString.call(obj) ] || "object";
},
...
core_toString = Object.prototype.toString,
...
append: function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 ) {
this.appendChild( elem );
}
});
},
|
спасибо, "оберточную" задачку я решил в лоб так:
function WrapIt(ContainerId, WraperElementType, WraperElementId, WraperElementClass, WrapBeforeElementId, WrapAfterElementId)
{
document.createElement(WraperElementType);
var tmpStr = document.getElementById(ContainerId).innerHTML
var InsertStart = tmpStr.indexOf(document.getElementById(WrapBeforeElementId).outerHTML, 0);
var InsertEnd = tmpStr.indexOf(document.getElementById(WrapAfterElementId).outerHTML, 0) + document.getElementById(WrapAfterElementId).outerHTML.length;
var resultStr = tmpStr.substring(InsertStart, 0) + '\n<' + WraperElementType + ' id="' + WraperElementId + '" class="' + WraperElementClass + '">\n' + tmpStr.substring(InsertStart, InsertEnd) + '\n</' + WraperElementType + '>\n' + tmpStr.substring(InsertEnd);
alert(tmpStr.substring(InsertEnd));
document.getElementById(ContainerId).innerHTML = resultStr;
}
Такой метод имеет право на жизнь или могут быть какие подвохи? |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function go() {
var of=document.getElementsByTagName('fieldset')[0];
var oa=of.getElementsByTagName('a');
var od=document.createElement('div');
var ou=document.createElement('ul');
while (oa[0]) {
o=document.createElement('li');
o.appendChild(oa[0]);
ou.appendChild(o);
};
od.appendChild(ou);
of.appendChild(od);
};
</script>
</head>
<body>
<fieldset>
<legend>
Legenda
</legend>
<a>
картинка текст 1
</a>
<a>
картинка текст 2
</a>
<a>
картинка текст 3
</a>
</fieldset>
<button onclick='go();'>Go</button>
</body>
</html>
|
спасибо! то что надо по ходу...
|
ksa,
подскажи как можно попутно убить у элементов прописаный стиль? выглядит так: <a buttonid="504" id="X31Border" href="javascript:void(0);" title="Item 4" tabindex="" content="Item 4" style="text-align: left; position: absolute; overflow: hidden; top: 280px; left: 25.200000000000003%; width: 72.9%; height: 29px; visibility: hidden;"><img class="HoverImage" id="X31" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 4" title="Item 4" enabled="0" style="opacity:0.35;">Item 4</a> сейчас делаю так:
if (document.getElementById('X31Border')) document.getElementById('X31Border').style.cssText = "";
но остаеться слово style: <a buttonid="504" id="X31Border" href="javascript:void(0);" title="Item 4" tabindex="" content="Item 4" style><img class="HoverImage" id="X31" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 4" title="Item 4" enabled="0" style="opacity:0.35;">Item 4</a> |
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function go() {
document.getElementsByTagName('div')[0].removeAttribute('style');
};
</script>
</head>
<body>
<div style='width: 100px; height: 30px; background-color: red;'></div>
<button onclick='go();'>Go</button>
</body>
</html>
http://javascript.ru/tutorial/dom/at...s#dom-atributy |
премного благодарю, все становиться намного яснея с вашей помощью :)
|
последний вопрос по данной теме, а как усовершенствовать даную функцию что бы она так же была рекурсивной? Тоесть если у елемента есть вложеные елементы - то и им стили убрать?
|
Цитата:
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
div {
margin: 5px;
padding: 5px;
}
</style>
<script type="text/javascript">
function go() {
var o=document.getElementsByTagName('div')[0];
var oc=o.getElementsByTagName('*')
for (var i=0; i<oc.length; i++) {
oc[i].removeAttribute('style');
};
o.removeAttribute('style');
};
</script>
</head>
<body>
<div style='background-color: red;'>
<div style='border: 1px solid;'>
<div style='height: 30px; border: 1px solid;'></div>
<div style='height: 30px; border: 1px solid;'></div>
</div>
</div>
<button onclick='go();'>Go</button>
</body>
</html>
|
Спасибо! Адаптировал и работает прекрасно!
|
| Часовой пояс GMT +3, время: 16:24. |