У меня есть динамически созданная <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>

Я хочу создать объект для передачи вызова 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" }
]
0
Cunning 17 Дек 2015 в 06:33

3 ответа

Лучший ответ

Вы можете сделать это, используя .map () .

Попробуйте вот так

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

});
console.log(outObj);

JSFIDDLE

1
Anik Islam Abhi 17 Дек 2015 в 03:55

Благодаря ответам Аника и Джа, я смог объединить два и полностью выполнить то, что мне было нужно, код расширения выглядит следующим образом

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

Это может быть не быстро с хорошей производительностью, поскольку я не проверял это.

0
Cunning 17 Дек 2015 в 05:48

Попробуйте, это даст вам 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);
1
Jah 17 Дек 2015 в 05:39