Create an array not a variable of values taken from the dom with jQuery?

Question

Im searching for elements with a class of 'some-class' within an element with a specific ID (provided by the variable myID).

For each one of these I need to get the value of the data attribute called 'data-att'. I then want to create an array of these but add the string custom-class-- to the beginning of each one.

My code below works except that it only generates 1 value. How can I make an array rather than a variable?

// 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 - here is a working 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>

Can you add full coding of this functionality ?

msvairam
– msvairam

2016-03-02 12:28:28 +00:00
Commented Mar 2, 2016 at 12:28 — msvairam
– msvairam, Commented Mar 2, 2016 at 12:28
@msvairam Ive updated my question.

Evanss
– Evanss

2016-03-02 12:35:23 +00:00
Commented Mar 2, 2016 at 12:35 — Evanss
– Evanss, Commented Mar 2, 2016 at 12:35
use .each jQuery method to loop through the collection

php-dev
– php-dev

2016-03-02 12:35:40 +00:00
Commented Mar 2, 2016 at 12:35 — php-dev
– php-dev, Commented Mar 2, 2016 at 12:35

The Process · Accepted Answer · 2016-03-02 12:32:35Z

4

You can try something like this:

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

});

And note that you can't use reserved words like classin your code.

answered Mar 2, 2016 at 12:32

The Process

5,9533 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Björn Grambow · Accepted Answer · 2016-03-08 12:01:09Z

1

You can use map() to loop through the elements and create automatically a new array filled with the values you return from the map callback. In the callback I am using data() to get the value of the data-att:

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

But be aware that this one will always return a value, even if you don't have an data-att attribute on the element. If you have cases with no data-att you will end up with custom-class--undefined. Which is not really a problem, you could use it even as a default style.

edited Mar 8, 2016 at 12:01

answered Mar 2, 2016 at 12:51

Björn Grambow

3782 silver badges14 bronze badges

Collectives™ on Stack Overflow

Create an array not a variable of values taken from the dom with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related