使用JavaScript中的過濾后的元素屬性創建對象

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>

我想創建一個對象中包含每個上的ID，標簽和文本的AJAX調用傳遞<div/>與元素[level="0"]

像這樣

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);

如果沒有測試，它可能不會很快並具有良好的性能。