一個 ul 里有若干 li,點擊 li 時能方便地知道這是 ul 中的第幾個 li 嗎?
01-15
雖然可以初始化的時候遍歷一遍,按順序添加一個自定義的屬性,可是有更優美的辦法么?
對於ol元素,可以訪問value屬性。不過注意value屬性並不是它在ol列表中第幾個,而是網頁作者指定的次序值,比如對於ol reversed,就是倒序的。至於說ul如何獲得次序,首先需要思考一下你為什麼要獲得次序,因為ul是無序列表通常跟次序是無關的。如果次序重要的話,你應該改用ol元素。如果你思考下來需求確實是合理的,那麼可以這樣:[].indexOf.call(this.parentNode.childNodes, this)
用jquery的indexli.on("click",function(){var i = $(this).index();//當前索引值alert(i);}不明白為什麼javascript就不能這樣子做,還要用到閉包for(var i=0; i&
}
return show;})(i);}$(this).index() ???
jQuery的index方法雖然能返回索引值,但這個方法其實也是封裝了對應的遍歷方法
index: function( elem ) {
if ( !elem ) { return ( this[0] this[0].parentNode ) ? this.prevAll().length : -1; }if ( typeof elem === "string" ) { return jQuery.inArray( this[0], jQuery( elem ) ); } return jQuery.inArray( elem.jquery ? elem[0] : elem, this ); },
inArray其實也遍歷了一遍數組
如果說真的想不遍歷,那麼只有一種比較偷懶的做法,為你的li加一個屬性用來存它的索引值,點擊它的時候直接alert這個屬性值的值。。。html:&
&
- asdasdasdas&
&- &
&- &
&- &
&- &
&- &
&- &
&
js:
不過這個方法真的很shi啊。。。document.getElementsByTagName("ul")[0].onclick = function (e){
e = e||window.event; var target = e.target||e.srcElement; var tagName = target.tagName; //alert(tagName); if(tagName == "LI"){ alert(target.getAttribute("index")) }}
jquery里的index方法直接調用的inArray方法
inArray: function(elem, array, i) {var len;if (array) {
if (indexOf) {return indexOf.call(array, elem, i); }len = array.length;
i = i ? i &< 0 ? Math.max(0, len + i) : i : 0;for (; i &< len; i++) {
// Skip accessing in sparse arraysif (i in array array[i] === elem) {return i; } } }return -1;},應該沒有更好的方式了
話說,你也可以通過計算被點擊 li 前面有幾個兄弟來得到它的排位
答主你覺得這個怎麼樣,非JQuery,也不用添加屬性。。。===========================================
&
function check() {
var li = document.getElementsByTagName("li");
for (var i = 0; i &< li.length; i++) {
li[i].index = i;
li[i].onclick = function() {
alert("我是第 " + (this.index + 1) + " 個 li");
}
}
}
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">&&&
- &
- sdfasdfsad& &
- asdfasdfasdf& &
- sadfasdf& &
- asdfasasdfa& &
- asdfasdfasdf& &
- asdf asdfas& &
- asdf asdf asf& &
- asdfa asdf fasd f& &
- & &