[Resolved] JavaScript working only on first post in view loop

[Author]

Posts

[neliS]

I have single field that has dynamic value, that value represents the amount of stars user gave to the review, in javascript i retrieve that number using getElementById and store it in variable 'dinamicka', then i retrieve element and store it in variable y , after that i set attribute of element to be the value of dynamic number, example(single field has value 4 so user sent 4 stars, i retrieve 4 and store it in variable dinamcika and after that I set attribute to my element to have attribute data-star="4" which will create desired 4 colored stars out of 5 using css), this code works but only for first post even tho single field has dynamic value.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

A page can have only one unique element with an ID, so this won't work for the repeating items coming from a view.

You can replace the use of 'id' with 'class' instead since a page can have multiple elements with the same class names.

In your custom script too, you'll then replace 'getElementById' with 'getElementsByClassName'.

regards,
Waqar

[neliS]

I have tried updating code like you said, but now it doesn't retrieve value from my <i class="zvezde"> element by using getElementsByClassName for some reason.

[Waqar]

To troubleshoot this, I'll need to see how the markup and the custom script are set up in the admin area.

Can you please share temporary admin login details, along with the link to the page where these ratings can be seen?
( please revert back to the HTML and code that was previously working, even only for the first instance )

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

[Waqar]

Thank you for sharing these details.

Looking into the HTML structure, you can update your custom script to:

jQuery( document ).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated', function( event, data ) {
	jQuery('div[class*="js-wpv-view-layout-2275-"] .js-wpv-loop-wrapper .wpv-block-loop-item').each(function () {
		var $this = jQuery(this);
		var y = $this.find('i.zvezde');
		var x = $this.find('div.rejting');
		var dinamicka = x.text();
		jQuery(y).attr("data-star",dinamicka);
	});
});

Note: Don't forget to change ids with classes, in the HTML.

[neliS]

This works perfectly now, you are brilliant Waqar, much appreciated your help!