脚本在 JSP 循环的每次迭代后运行两次答案

【问题标题】：Script runs twice after each iteration of a JSP loop脚本在 JSP 循环的每次迭代后运行两次
【发布时间】：2012-10-27 18:28:00
【问题描述】：

<div style="width:100%;background-color:  #61b832;border-radius: 10px;color:white;text-align: center">Videos List</div>
<table style="width:100%;"id="videoTable">
    <c:forEach items="${requestScope.userInfo.videoList}"var="video"varStatus="0">
        <script>
            var fullvideoUrl='<c:out value="${video.videoUrl}"></c:out>';
            var videocode='http://www.youtube.com/embed/'+youtube_parser(fullvideoUrl);
            $('#videoTable').prepend('<tr class="appendVideo"><td  style="width:80%;border-bottom: 1px solid #CCC;"><c:out value="${video.videoDescription}"></c:out></td><td  style="width:20%;border-bottom: 1px solid #CCC"><img src="images/fancybox_play-button-icon.png" class="changeVideo" videoId="<c:out value="${video.videoId}"></c:out>" videoUrl ="'+videocode+'"/></td></tr>');
        </script>
    </c:forEach>
</table>
</div>

这是我正在尝试做的，但每个视频都会在表格中添加两次

【问题讨论】：

怎么回事，是JS脚本还是生成的HTML页面？请向我们展示输出
查看页面源代码...每个视频的脚本标记有两次吗？
你能检查在生成的 html 中添加脚本的次数吗？
是的脚本标签在源代码中有两次
你能显示完整的生成的 HTML 吗？显然，有六个明显的脚本块。

标签： javascript jquery jstl el

【解决方案1】：

您可能希望使用c:if，如下所示：

    <c:if test="${requestScope.userInfo.videoList.size() >0}" >
      <script>
          $('#videoTable').prepend("1");
      </script>
    </c:if>

编辑：

不知道为什么要使用script。我想你可以这样写：

 <div style="width:100%;background-color:  #61b832;border-radius: 10px;color:white;text-align: center">Videos      List</div>
  <table style="width:100%;"id="videoTable">
   <c:forEachitems="${requestScope.userInfo.videoList}" var="video" varStatus="0">
     <tr class="appendVideo"><td  style="width:80%;border-bottom: 1px solid #CCC;"><c:out value="${video.videoDescription}"></c:out></td><td  style="width:20%;border-bottom: 1px solid #CCC"><img src="images/fancybox_play-button-icon.png" class="changeVideo" videoId="<c:out value="${video.videoId}"></c:out>" videoURL="http://www.youtube.com/embed/${video.videoUrl}"/></td></tr>
   </c:forEach>
  </table>
</div>

如果您想对结果进行反向排序，只需在 UI 中打印之前使用 Collections.sort 反向排序您的 requestScope.userInfo.videoList。另外，如果 URL 中有任何需要修改，请在原始视频列表中执行。

【讨论】：

这对每个循环都没有问题，如果我在这个循环下打印 varStatus，它的打印三次，但是当我使用脚本将它添加到表格中时，它的前置 6 次跨度>
@MayankSharma 此答案基于您共享的代码 sn-p，目的是根据列表可用性仅预先添加一次。如果有不同的用法和问题，请分享完整的相关代码。
@MayankSharma 我不确定，当您以任何方式使用c:forEach 标记时，为什么要使用脚本来显示列表。我建议您预先处理您的视频列表，然后仅使用 JSP 脚本来渲染屏幕。
实际上我已经创建了一个正则表达式 JS 函数来获取每个 youtube 视频的唯一代码，并且在数据库中我现在存储了 youtube 的完整 url 为了调用这个函数我把这些东西放在脚本标签下
@MayankSharma 在这种情况下，列出原始 URL，然后使用 onclick 函数调用 URL 并在其中使用您的自定义 JS 函数。

【解决方案2】：

当您在 jsp 文件中使用样式并且其中一种样式包含正文标记时，有时会出现此问题删除样式定义标签内的任何正文标签，jsp 将正常工作。正文语句如下所示：

body {
    background-image: url();
}

只需从您的脚本中删除此行并重新运行您的页面。

【讨论】：