如何使用jQuery在JSP中循环DIV和HTML类？_Jquery_Html_Jsp_Loops

如何使用jQuery在JSP中循环DIV和HTML类？

jquery html jsp loops

如何使用jQuery在JSP中循环DIV和HTML类？,jquery,html,jsp,loops,Jquery,Html,Jsp,Loops,我想在以编程方式构建的服务器端JSP上循环。 JSP显示用户编写的不同数量的文章，对于每一篇文章，显示like/nothing按钮。如果当前连接的用户对给定的帖子投了赞成票或不赞成票，我想使相应的喜欢/不喜欢按钮更亮（但这是一个细节）我的问题是在我创建的不同的“div”和“class”上循环，在这里我存储了一些与JSTL语句集成的值下面是我的JSP的HTML表示形式（从我尝试创建jQuery循环但未成功的JSBin复制）：这个jQuery函数不起作用，我真的不知道为什么。我似乎有语法错误

我想在以编程方式构建的服务器端JSP上循环。 JSP显示用户编写的不同数量的文章，对于每一篇文章，显示like/nothing按钮。如果当前连接的用户对给定的帖子投了赞成票或不赞成票，我想使相应的喜欢/不喜欢按钮更亮（但这是一个细节）

我的问题是在我创建的不同的“div”和“class”上循环，在这里我存储了一些与JSTL语句集成的值

下面是我的JSP的HTML表示形式（从我尝试创建jQuery循环但未成功的JSBin复制）：

这个jQuery函数不起作用，我真的不知道为什么。我似乎有语法错误，但我没有找到它（或它们）

有人能帮我运行这个jQuery并循环我的JSP吗

PS：如果有人知道一个JS/jQuery IDE，它的调试可能会更容易，而不仅仅是“错误”，那么最好给出它的名称。

你可以看到这个snipet

$（文档）.ready（函数（）{
$（'.thread'）。每个（函数（）{
var val=$（此）.data（“投票”）；
$（this.find（“p”）.text（val）；
如果（val==1）{
$（this.find（“.like”）.addClass（'voated'）；
}
else if（val==-1）{
$（this.find（“.dislike”）.addClass（'voted'）；
}
});
});
.like{
颜色：绿色；
}
.不喜欢{
颜色：红色；
}
.线程{
填充物：5px；
边框样式：实心；
边框宽度：1px；
保证金：5px；
}
.投票{
边框宽度：2倍；
边框颜色：蓝色；
背景颜色：金色；
}








您是否注意到您在$（此）
参考中复制了美元$
符号？或者它是一个变量名？是的，你是对的@Roizpi。现在已经更正了，但仍然不起作用。太棒了@aroniaina！！很明显，我根本没有想到这种“查找”方法。太多了！！如果答案能解决你的问题，你可以投票并接受它！是的，我会毫无问题地投票支持你的答案。再告诉我一件事：你用什么工具？我个人使用Eclipse和JSBin，但是调试和发现我的错误非常困难（我是JS的优秀初学者）。我的IDE是netbeans，我不调试它，我亲眼看到了它！但是你可以使用开发工具，比如firebug
或者webdeveloper浏览器插件！当我开始使用JS和jQuery时，我的眼睛仍然是瞎的。幸运的是，我有时会遇到像你这样教我很多东西的人。西娅。
<!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>

$(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);
    }
  });
});