Getting error when using FOR OF array loop using javascript?

Question

Here, Why my code is not working in IE. My code is working for all browser.there is no issue. But when I run my project on IE its find error.

And also my jquery class and insertadjacentHTMl not working.

main issue i find in this code.

$("[type=slideshow] section").addClass('hide');
		for(let ele of Array.from($("[type=slideshow]"))){
			$(ele).children("section:first").removeClass("hide").addClass('active');
		}

Here, is my code please review it where is error .

//Code for Slideshow

var divSlide = document.querySelectorAll('#slide');

var myNodeList = divSlide.length;
let slideNo = 1;

for(var i = 0; i < myNodeList; i++) {
	var type = divSlide[i].getAttribute("type");
	if (type == "timeline") {

	} else if (type == "slideshow") {
		var timeline = divSlide[i];     
		let sliderData = timeline.getElementsByTagName("section");
		
		$("[type=slideshow] section").addClass('hide');
		for(let ele of Array.from($("[type=slideshow]"))){
			$(ele).children("section:first").removeClass("hide").addClass('active');
		}

		timeline.insertAdjacentHTML("afterbegin",'<a class="left prev color_arrow carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

		timeline.insertAdjacentHTML('afterbegin','<a class="right next color_arrows  carousel-control" href="#myCarousel"  data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');
	}
}

$(document).on ('click','.prev',function() {
	let select = $(this).parent();
	let totChild = select.children("section");
	for(let i=0;i<totChild.length;i++){
		if(totChild[i].getAttribute('class').indexOf('active')!=-1){
			slideNo=i+1;
		}
	}
	totChild.children('br').remove();
	let current = select.children('.active');
	let prevEl = current.prev('section');
	
	if(slideNo === totChild.length || slideNo > 1){
		select.children(".next").show();
		if(prevEl.length !== 1){
			prevEl = current.prev().prev();
			current.removeClass('active');
			current.addClass('hide');

			prevEl.addClass('active');
			prevEl.addClass('animated');
			prevEl.addClass('fadeInLeft');
			prevEl.removeClass('hide');
		}
	} else {
		select.children(".prev").hide();
	}
});
$(document).on ('click','.next',function() {
	let select = $(this).parent();
	let totChild = select.children("section");
	for(let i=0;i<totChild.length;i++){
		if(totChild[i].getAttribute('class').indexOf('active')!=-1){
			slideNo=i+1;
		}
	}
	
	totChild.children('br').remove();
	let current = select.children('.active');
	let prevEl = current.next('section');
	if(slideNo ===1 || slideNo < totChild.length){
		
		select.children(".prev").show();
		if(prevEl.length !== 1){
			prevEl = current.next().next();
			current.removeClass('active');
			current.addClass('hide');
			prevEl.addClass('animated');
			prevEl.addClass('fadeInRight');
			prevEl.addClass('active');
			prevEl.removeClass('hide');
		}
	} else {
		select.children(".next").hide();
	}
});

That's because for..of is completely unsupported in IE: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Rory McCrossan
– Rory McCrossan, Commented Apr 9, 2018 at 8:49
Why not iterate $("[type=slideshow]") using jquery's each? — gurvinder372
– gurvinder372, Commented Apr 9, 2018 at 8:50
@gurvinder372 because i have 4 div everything same except it type= timeline and slidehsow and i loop over all section inside div or type div. so i use each $("[type=slideshow]"). give me some suggestion gurvinder pajji. — HELP
– HELP, Commented Apr 9, 2018 at 8:53

gurvinder372 · Accepted Answer · 2018-04-09 09:04:10Z

1

for-of is not supported on IE. You can replace your for-of-loop with jquery's each as

$("[type=slideshow] section").addClass('hide');
$("[type=slideshow]").each( function(i,ele){ //i is the index and ele is the element in iteration
   $(ele).children("section:first").removeClass("hide").addClass('active');
});

Also, no need to mix jquery with javascript's querySelector and looping over results using for-loop.

When using # based selector #slide as in this line

var divSlide = document.querySelectorAll('#slide');

It is only going to give one result, simply use

timeline = $( "#slide" )[0];

No need for outer for-loop and if-condition.

answered Apr 9, 2018 at 9:04

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

1 Comment

gurvinder372 Over a year ago

Sure, Glad to help!

Collectives™ on Stack Overflow

Getting error when using FOR OF array loop using javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related