Создать массив не переменную значений, взятых из dom с jQuery?

Question

Im ищет элементы с классом «some-class» внутри элемента с определенным идентификатором (предоставленным переменной myID).

Для каждого из них мне нужно получить значение атрибута data, называемого 'data-att'. Затем я хочу создать массив из них, но добавьте строку custom-class-- в начало каждого из них.

Мой код ниже работает, за исключением того, что он генерирует только 1 значение. Как я могу создать массив, а не переменную?

// a in the ID of the container to search in for elements with a class of 'some-class' 
var myID = '#' + myID; 

// Create a varialbe which starts 'custom-class--' and then has the data-att attribute 
// of elements for elemts with a class of 'some-class' 
var class = 'custom-class--' + $(myID).find('.some-class').attr('data-att'); 

UPDATE - вот рабочий codepen: http://codepen.io/anon/pen/reVeja?editors=1111

<a href="#" class="some-class" data-att="data-1">Link</a> 

<div id="my-id"> 
    <a href="#" class="some-class" data-att="data-2">Link</a> 
    <a href="#" class="some-class" data-att="data-3">Link</a> 
</div> 

<script type="text/javascript"> 

$(function() { 

    // a in the ID of the container to search in for elemnts with a class of 'some-class' 
    var myID = '#' + 'my-id'; 

    // Create a variable which starts 'custom-class--' and then has the data-att attribute 
    // of elements for elements with a class of 'some-class' 
    var myClass = 'custom-class--' + $(myID).find('.some-class').attr('data-att'); 

    console.log(myClass); 

}); 
</script> 

Answer 1

Вы можете попробовать что-то вроде этого:

var myID = '#' + myID; 
var elemClass=[]; 

$(myID).find('.some-class').each(function(){ 
    if($(this).attr('data-att').length){ 

     elemClass.push('custom-class--'+ $(this).attr('data-att')) ; 
    } 

}); 

И заметьте, что вы не можете использовать reserved words как class в вашем код.

Answer 2

Вы можете использовать map() для прокрутки элементов и автоматического создания нового массива, заполненного значениями, возвращаемыми из обратного вызова карты. В обратный вызов я использую data(), чтобы получить значение data-att:

var parentId = '#PARENTID', 
    clNames = $.map($(parentId).find('.some-class'), function(i,el){ 
     return 'custom-class--'+ $(el).data('att'); 
    }); 

Но следует помнить, что это всегда будет возвращать значение, даже если вы не имеете data-att атрибут элемента. Если у вас есть случаи без data-att, вы получите custom-class--undefined. На самом деле это не проблема, вы можете использовать ее даже в качестве стиля по умолчанию.