Javascript loop indexing issue
Ad
Here's the HTML
<li class="carousel-btn-wrapper">
<div class="progressButton">
<p></p>
</div>
<button class="videoCaroselButton">Welcome</button>
</li>
<li class="carousel-btn-wrapper">
<div class="progressButton">
<p></p>
</div>
<button class="videoCaroselButton">Video Name</button>
</li>
<li class="carousel-btn-wrapper">
<div class="progressButton">
<p></p>
</div>
<button class="videoCaroselButton">Another Video Name</button>
</li>
I am trying to add a number in the p tag that is a child of the .progressButton. I need the number to increase with every p tag. I'm having issues with my javascript loop. I assume the issue is in the way .text(buttonNumber[]); is indexing. How do I solve this?
var videoSrcArray = ['url.com/adf', 'url.com/asf', 'url.com/sdf', 'url.com/asdf','url.com/asdfl']
var buttonNumber = "";
var i;
for (i = 1; i < videoSrcArray.length - 1; i++) {
buttonNumber += i ;
$('.progressButton').children('p').text(buttonNumber[1]);
}
Ad
Answer
Ad
You actually don't need buttonNumber
at all. Delete it (lines 2 and 5)
and then change:
$('.progressButton').children('p').text(buttonNumber[1]);
to:
$('.progressButton').children('p').eq(i-1).text(i);
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad