CODEWITHSUNDEEP
javascriptjqueryarrays
rrmesquita
rrmesquita

Reputation: 696

Get element attribute from array

The objective is to create multiple sliders on the page by linking the slider to something. The slider must be activated by clicking or hovering the slider anchor. sliderList would be a array for making this process easier so i wouldn't have to link each other manually on the configs js file.

I need to get the attribute value from a element that is inside an array. In this case, holder is the array from where I want to extract the attribute value from the current array element. I tried doing this:

var holder = $('[slider-select]');

for (var i = 0; i < holder.length; i++) {
    var sliderList = $('[slider-target='
        +holder[i].attr('slider-select')
        +']');
}

It looks like +holder[i].attr('slider-select') isn't working. I'm learning JavaScript/Jquery and it's crazy how things goes wrong even when it makes all sense, lol. Let me know if I wasn't clear enough.

Upvotes: 2

Views: 5731

Answers (3)

Daniel Beck
Daniel Beck

Reputation: 21485

holder[i] contains a plain DOM element, but you're trying to use the jQuery attr method on it. You need to convert it into a jQuery object $(holder[i]) (or else use the native getAttribute on the DOM element):

var holder = $('[slider-select]');

for (var i = 0; i < holder.length; i++) {
  // Splitting this up a bit just to make it more readable:
  var val = $(holder[i]).attr('slider-select'); // instead of holder[i].attr(...)
  var sliderList = $('[slider-target="' + val + '"]');

  // confirm we got the element:
  console.log(sliderList.text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div slider-select="A">A</div>
<div slider-select="B">B</div>
<div slider-select="C">C</div>

<div slider-target="A">a</div>
<div slider-target="B">b</div>
<div slider-target="C">c</div>

Upvotes: 1

Anthony L
Anthony L

Reputation: 2169

The attr method is not a function on the JS element object. You'll want to wrap it in jquery to retrieve attribute values instead. For instance

$(holder[i]).attr("slider-select")

Upvotes: 0

Ele
Ele

Reputation: 33726

The function attr is a built-in function from jQuery, it's a shorthand of function getAttribute and setAttribute.

In your case you want to do this:

var holder = $('[slider-select]');

for (var i = 0; i < holder.length; i++) {
    var test = holder[i];
    var sliderList = $('[slider-target=' + holder[i].getAttribute('slider-select') + ']');
}                                                    ^

A good approach is to use the jQuery built-in functions, so you can use this:

$('[slider-select]').each(function() {
    var sliderList = $('[slider-target=' + $(this).attr('slider-select') + ']');                  
});                                                ^

Resources

Upvotes: 1

Related Questions