JavaScript jQuery each

[System32]

So, I am having this page: https://testaca.forumotion.me/t6-vote
There, every post has: "vote-bar-desc" class that holds text such as: "Message reputation : 100% (1 vote)".
What I am trying to do is to loop through each post, set counter (that h4) to the number of votes. I did this

$(document).ready(function(){
 
$(".post-body").each(function () {
  let position = $(".vote-bar-desc").text().lastIndexOf("(");
  let reputation = $(".vote-bar-desc").text().slice(position).replace(/[^0-9\.]+/g, ""); 
$(".personal-vote h4").text(reputation);                 
                  
  }); 
  });

I clear the string, get the number of votes but the issue is the number that it is placed is not correct. This loop gets right away all the values from class "vote-bar-desc" and i get wrong result, of course. So, how to deal with this? If you guys need a way to get total number of posts, you can use this:

let numOfPosts =  $('.post-body').children('div').length;

 

[Antero360]

So, I am having this page: https://testaca.forumotion.me/t6-vote
There, every post has: "vote-bar-desc" class that holds text such as: "Message reputation : 100% (1 vote)".
What I am trying to do is to loop through each post, set counter (that h4) to the number of votes. I did this

$(document).ready(function(){
 
$(".post-body").each(function () {
  let position = $(".vote-bar-desc").text().lastIndexOf("(");
  let reputation = $(".vote-bar-desc").text().slice(position).replace(/[^0-9\.]+/g, "");
$(".personal-vote h4").text(reputation);                
                 
  });
  });

I clear the string, get the number of votes but the issue is the number that it is placed is not correct. This loop gets right away all the values from class "vote-bar-desc" and i get wrong result, of course. So, how to deal with this? If you guys need a way to get total number of posts, you can use this:

let numOfPosts =  $('.post-body').children('div').length;

Hey there,
Ok, so I am a bit confused as to what you are trying to do. I get the goal, but, isn't that what the original number in the h4 is representing?

 

[System32]

So, down there we see total number of votes. I would like to pull that up into h4. But, do that for each post. My srcipt doesn't work well. It gets last value from last post and put it everywhere. Doesn't go post by post.

 

[Antero360]

View attachment 1812

So, down there we see total number of votes. I would like to pull that up into h4. But, do that for each post. My srcipt doesn't work well. It gets last value from last post and put it everywhere. Doesn't go post by post.

I figured that was the goal, but I was confused as to whether or not the (2 votes) and the number between the arrows were representing the same thing.
Part of your issue is this line

 

[Antero360]

I figured that was the goal, but I was confused as to whether or not the (2 votes) and the number between the arrows were representing the same thing.
Part of your issue is this line
View attachment 1813

What you want is to query the current post-body for the '.personal-vote h4'

 

[System32]

I figured that was the goal, but I was confused as to whether or not the (2 votes) and the number between the arrows were representing the same thing.
Part of your issue is this line
View attachment 1813

How is that line an issue? I believe I don't understand you.

 

[Antero360]

What you want is to query the current post-body for the '.personal-vote h4'

For reference:

jQuery.each() | jQuery API Documentation

api.jquery.com

5 jQuery.each() Function Examples - SitePoint

This article provides an extensive overview of the jQuery each() function, using several examples to show why it's one of jQuery's most important functions.

www.sitepoint.com

Looking at it a bit more, all three lines are an issue

 let position = $(".vote-bar-desc").text().lastIndexOf("(");
  let reputation = $(".vote-bar-desc").text().slice(position).replace(/[^0-9\.]+/g, ""); 
$(".personal-vote h4").text(reputation);

Here's why:
$('.className'); === this returns a collection of all elements that have the class of 'className'.
$('#idName'); === this returns one element given the nature of how ids work.

if you are iterating through an array of elements, and you want to target a child of that element, does it make sense to grab a collection of all child items of that you are looking for, or does it make more sense to query the current element's children?

 

[System32]

I have a trouble understanding jQuery each, even tough I read the explanation. It is not hard with basic examples, but this is real life problem with lots of html and many sub children in it. But I get what you said about post-body. The ID I have of complete post is "post-xyz". Now, how can I possibly access each ID when I don't know the post number?

Parhaps all of this is quite simple for you but for me it's like advanced science class

 

[Antero360]

$(".post-body").each( element => {
    //$(element).children()
   //or if you wanna do it with straight js
   //element.querySelector('.personal-vote h4');
});

 

[Antero360]

I have a trouble understanding jQuery each, even tough I read the explanation. It is not hard with basic examples, but this is real life problem with lots of html and many sub children in it. But I get what you said about post-body. The ID I have of complete post is "post-xyz". Now, how can I possibly access each ID when I don't know the post number?

Parhaps all of this is quite simple for you but for me it's like advanced science class

lol Believe me, even I have my issues now and then. Totally relatable

 

[System32]

$(".post-body").each( element => {
    //$(element).children()
   //or if you wanna do it with straight js
   //element.querySelector('.personal-vote h4');
});

Will checkout this.

P.S. I like your quotes. Sun Tzu was a wise man.

 

[Antero360]

Will checkout this.

P.S. I like your quotes. Sun Tzu was a wise man.

Ah, finally someone who appreciates a good book