Question

我有一个像这样的动态创建的<div/>区域

<div class="canvas">
    <div id="1" data-level="0" data-tag="a"></div>
    <div id="2" data-level="0" data-tag="b">
        <div id="3" data-level="1" data-tag="b">
            <div id="4" data-level="2" data-tag="a"></div>
        </div>
        <div id="5" data-level="1" data-tag="a"></div>
    </div>
    <div id="6" data-level="0" data-tag="b"></div>
</div>

我想创建一个对象，传递包含每个<div/>元素上带有[level="0"]的ID，标签和文本的ajax调用。

像这样的东西

var outObj = jQuery('div.canvas > div[level="0"]')
    .objectFromFilter([
        {attr: 'id', prop: 'id'}, 
        {attr: 'data-tag', prop: 'tag'}
    ]);
console.log(outObj);

这会导致

[
    { id: "1", tag: "a" },
    { id: "2", tag: "b" },
    { id: 6, tag: "b" }
]

Answer 1

您可以使用 .map()

执行此操作

试试这个

var outObj = $('div.canvas > div[data-level="0"]').map(function() {
  return {
    id: $(this).attr("id"),
    tag: $(this).data("tag")
  };

});
console.log(outObj);

的 JSFIDDLE

Answer 2

试试这个它会给你一个类似JSON的结构......

        var arr = [];

        $('.canvas').find('div[data-level="0"]').each(function () {
            var $element = $(this);

            arr.push({
                id: $element.prop('id'),
                tag: $element.data('tag')
            });

        });

        console.log(arr);

Answer 3

感谢Anik和Jah的回答，我能够将我所追求的两个完整组合，扩展代码如下

jQuery.fn.objectFromFilter = function(f){
    var o = this.get();
    o = jQuery.map(o, function(q) {
        var o = {};
        for (var i = 0; i < f.length; i++){
            var a = q.getAttribute(f[i].a);
            if (typeof a !== typeof undefined && a !== false && a !== null)
                o[f[i].prop] = a;
        }
        return o;
    });
    return o;
};

，用法就像这样

var outObj = $('div.canvas > div[data-level="0"]').objectFromFilter([
    {attr: 'id', prop: 'id'}, 
    {attr: 'data-tag', prop: 'tag'}
]);
console.log(outObj);

由于我没有对其进行测试，因此性能可能不会很快。

使用JavaScript中的过滤元素属性创建对象

3 个答案: