2

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.

Improve this question
7
  • What are you trying to do with the sliderList? Commented Feb 24, 2018 at 23:08
  • I have a few anchors targeting to a few sliders on the page. sliderList would be the array containing the targeted slider so i can make an easy connection without linking each slider to its anchor on the js file Commented Feb 24, 2018 at 23:14
  • explain what are you trying to do what you have done what you have tried and what is your problem so others can help .. thanks Commented Feb 24, 2018 at 23:22
  • @sam the objective here 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. Commented Feb 24, 2018 at 23:34
  • @cslogic update your original post so everyone can read it not everyone read comments Commented Feb 24, 2018 at 23:35

3 Answers 3

Reset to default
1

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

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

Comments

1

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>

Improve this answer

Comments

0

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")
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.