javascript - 将有关选定元素的信息收集到对象数组

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元素的信息，这些元素是列表项的第一个子元素（可能使用 Jquery方法？）并制作这个数组： .index.index()

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

其中indexproperty是一个整数，表示.index > .txt:first-child元素在.container元素中的位置，并且是应用于该元素txtcontent的Jquery方法的结果。 注意：元素可能有属性，我什至可以动态插入新元素，所以每次点击 时，都必须将现有数组替换为新数组（即从头开始重建）。 text()
txtcontenteditableli.indexul.makearray

请帮忙，谢谢

Answer 1

您可以使用子组合>器来定位跨度，并使用 jQuery.map来构建数组：

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

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