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属性是一个整数，表示.index > .txt:first-child元素在.container元素中的位置，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/

将有关所选元素的信息收集到对象数组中

1 个答案: