Question

我有我的网页的简化版本（它是一个混乱的IRL）：

<li id=section1 class=sortable_section>
    <header>
    <ul id=container1>
        <li id=item1 class=sortable_item>
        <li id=item2 class=sortable_item>
    </container
</section

<li id=section2 class=sortable_section>
    <header>
    <ul id=container2>
        <li id=item3 class=sortable_item>
        <li id=item4 class=sortable_item>
        <li id=item5 class=sortable_item>
    </container>
</section>

所以，我可以$j("container1").sortable('serialize')创建一个包含所有包含li的id的数组。所以我会["item1", "item2"]获得container1。

如何制作如下所示的数组：

[
 ["section1", ["item1", "item2"]],
 ["section2", ["item3", "item4", "item5"]]
]

这就是我一直在努力的方法：但它不起作用

        d = $j.makeArray(
        $j('.sortable_section').each(function(i){
            [$j(this).attr("id"),
                $j.makeArray($j.map($j("#"+$j(this).attr("id")+" .sortable_item"), function(s,j){
                    return ($j(s).attr("id"));
                }))]
        }));

但是它返回整个对象，而不仅仅是id ....

编辑：根据其中一个答案的建议，现在就是我所拥有的

d = $j(".sections > li").map(function(index, element){
                return [$j(element).attr('id'),
                    $j("#"+$j(element).attr('id') + " .content").map(function(subindex, subelement){
                        return $j(subelement).attr('id');
                    }).toArray()];


            }).toArray();

但我收到此错误

TypeError: Result of expression near '...}).toArray()]...' [undefined] is not a function.

当我在$j(element).attr('id')和$j(subelement).attr('id')发出提醒时，我会收到正确的ID

Answer 1

使用jQuery的map函数：

$('#master-list > li').map(function(index, element)
{
    return [$(element).attr('id'),
        $(this).children('ul > li').map(function(subindex, subelement)
        {
            return $(subelement).attr('id');
        }).toArray()];
}).toArray();

编辑：

我的坏。上述内容已使用相应的.toArray()来电更新。

重新编辑：

好吧，这就是我获得的自由式编码。这是正确的，经过实际测试的脚本，以及我用来测试它的标记。我无法重现您的错误，但可能是因为没有id的元素或可能与您将$符号重命名为$j有关。

<script type="text/javascript">
    $(function () {
        var x = $('#master-list > li').map(function (index, element) {
            return [[element.id,
                $(element).find('li').map(function (subindex, subelement) {
                    return subelement.id;
                }).toArray()]];
        }).toArray();
    });
</script>

<ul id="master-list">
    <li id="section1" class="sortable_section">
        Header
        <ul id="container1">
            <li id="item1" class="sortable_item">a</li>
            <li id="item2" class="sortable_item">b</li>
        </ul>
    </li>

    <li id="section2" class="sortable_section">
        Header
        <ul id="container2">
            <li id="item3" class="sortable_item">a</li>
            <li id="item4" class="sortable_item">b</li>
            <li id="item5" class="sortable_item">c</li>
        </ul>
    </li>
</ul>

上述不起作用的原因对于jQuery的map函数有点奇怪：显然，如果返回一个值数组，它会使数组变平并返回所有值。因此，您只需[a, [b, c]]而不是[a, b, c]。为了解决这个问题，我添加了一组额外的括号，以便您现在返回一个包含数组的数组，当数字被展平时，它就是您想要的数据。

仅供参考，您不需要这样做：

$('#' + $(element).attr('id') + ' .content')

使用此代码可以在更易读的代码中获得相同的效果：

$(element).find('.content');

Answer 2

你能用

吗？

var serializedListItems = $("li").serializeArray();

jQuery：如何构建二维数组？

2 个答案: