標籤:

一個 ul 里有若干 li,點擊 li 時能方便地知道這是 ul 中的第幾個 li 嗎?

雖然可以初始化的時候遍歷一遍,按順序添加一個自定義的屬性,可是有更優美的辦法么?


對於ol元素,可以訪問value屬性。不過注意value屬性並不是它在ol列表中第幾個,而是網頁作者指定的次序值,比如對於ol reversed,就是倒序的。

至於說ul如何獲得次序,首先需要思考一下你為什麼要獲得次序,因為ul是無序列表通常跟次序是無關的。如果次序重要的話,你應該改用ol元素。

如果你思考下來需求確實是合理的,那麼可以這樣:

[].indexOf.call(this.parentNode.childNodes, this)


用jquery的index

li.on("click",function(){

var i = $(this).index();//當前索引值

alert(i);

}

不明白為什麼javascript就不能這樣子做,還要用到閉包

for(var i=0; i&li[i].onclick = (function(msg){

show:function(){

alert(msg);

}

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:

    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"))

    }

    }

    不過這個方法真的很shi啊。。。


    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 arrays

    if (i in array array[i] === elem) {

    return i;

    }

    }

    }

    return -1;

    },應該沒有更好的方式了


    話說,你也可以通過計算被點擊 li 前面有幾個兄弟來得到它的排位


    答主你覺得這個怎麼樣,非JQuery,也不用添加屬性。。。

    ===========================================

    &

    &無標題文檔&

    &