Lovegiver Lovegiver - 29 days ago 11
HTML Question

How to loop DIV and HTML classes in a JSP with jQuery?

I want to loop on a JSP that is built programmatically server side.
The JSP displays various number of posts written by users and, for each post, like/unlike buttons.
If the currently connected user has voted like or dislike for a given post, I want to make brighter the corresponding like/dislike button (but this is a detail).

My problem is to loop on the the different "div" and "class" I've created where I store some values integrated with JSTL statements.

Here is a HTML representation of my JSP (copied from JSBin where I try to create the jQuery loop but without sucess) :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
.like{
color: green;
}
.dislike{
color: red;
}
.thread{
padding: 5px;
border-style: solid;
border-width: 1px;
margin: 5px;
}
.voted{
border-width: 2px;
border-color: blue;
background-color: gold;
}
</style>
</head>
<body>

<div class="thread" data-post="1" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="2" data-vote="1">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="3" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="4" data-vote="-1">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="5" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="6" data-vote="1">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<div class="thread" data-post="7" data-vote="0">
<input type="button" value="Like" class="like"/>
<input type="button" value="Dislike" class="dislike"/>
<p class="postId"></p>
</div>
<hr>
</body>
</html>


"data-post" contains the postId and "data-vote" contains the value of the vote by the connected user : 1 = like, -1 = unlike, 0 = unvoted or cleared vote.

Each
<div>
contains a post.

$(document).ready(function(){
$(".thread").each(funtion(){
var val=$($this).data("vote");
$("p").text(val);
if(val == 1){
(".like").addClass(voted);
}
else if (val == -1){
(".dislike").addClass(voted);
}
});
});


This jQuery funtion doesn't work and I really don't know why. I seem to have syntax error but I don't find it (or them).

Can someone help me make this jQuery run and loop my JSP ?

PS : if anybody knows a JS/jQuery IDE where debugging could be easier and not just "error", it would be nice to give its name.

Answer

You can see this snipet.

$(document).ready(function () {
  $('.thread').each(function () {
    var val = $(this).data("vote");
    $(this).find("p").text(val);
    if (val == 1) {
      $(this).find(".like").addClass('voted');
    }
    else if (val == -1) {
      $(this).find(".dislike").addClass('voted');
    }
  });
});
.like{
  color: green;
}
.dislike{
  color: red;
}
.thread{
  padding: 5px;
  border-style: solid;
  border-width: 1px;
  margin: 5px;
}
.voted{
  border-width: 2px;
  border-color: blue;
  background-color: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thread" data-post="1" data-vote="0">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>
<div class="thread" data-post="2" data-vote="1">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>
<div class="thread" data-post="3" data-vote="0">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>
<div class="thread" data-post="4" data-vote="-1">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>
<div class="thread" data-post="5" data-vote="0">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>
<div class="thread" data-post="6" data-vote="1">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>
<div class="thread" data-post="7" data-vote="0">
  <input type="button" value="Like" class="like"/>
  <input type="button" value="Dislike" class="dislike"/>
  <p class="postId"></p>
</div>

YOUR ERRORS

  • Syntax error on line 3 : $($this) must be $(this)
  • To manipulate only the dom inside the current .thread element, you should use .find() function of Jquery
  • Syntax error on line 6 and line 9: (".like") must be $(".like") (but you should also use .find())
  • Syntax error on line 6 and line 9: addClass(voted) must be addClass('voted')