有關所選元素對象的數組收集信息

Question

我有這樣的標記：

<span class="makearray">click me</span> 
<div id="container"> 
    <ul> 
     <li class="noindex"><span class="txt">blahblah</span></li> 
     <li class="noindex"><span class="txt">blahblah</span></li> 
     <li class="index"><span class="txt">text1</span> 
      <ul> 
       <li class="index"><span class="txt">text2</span> 
        <ul> 
         <li class="noindex"><span class="txt">blahblah</span></li> 
         <li class="index"><span class="txt">text3</span></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

當我點擊.makearray元素，我想收集信息關於我的所有.txt元素是第一兒童的.index列表項（也許使用jQuery .index()方法？），使這個數組：

var info = [{ 
    "index": "1", 
    "txtcontent": "text1" 
}, { 
    "index": "2", 
    "txtcontent": "text2" 
}, { 
    "index": "3", 
    "txtcontent": "text3" 
}] 

其中index屬性是一個整數i在.container元素中指示.index > .txt:first-child元素的位置，txtcontent是應用於此元素的Jquery text()方法的結果。
注：txt元件可以具有contenteditable屬性，我甚至可能插入新li.index元素注入ul動態，所以每次我點擊.makearray，現有的陣列必須由新的替換（即，從頭開始重建）。

請幫忙，謝謝

Answer 1

可以使用child combinator >爲目標的跨度，以及jQuery的.map構建陣列：

var arr = $('.index > .txt').map(function(i,el){ 
    return { 
     index : i, 
     txtcontent : el.textContent 
    }; 
}); 
console.log(arr); 

http://jsfiddle.net/39VyA/1/