如何在JQuery中创建内容(项目符号列表)？我使用字符串创建的内容看起来不像list。我应该如何修改代码？
如何在JQuery中创建内容(项目符号列表)？我使用字符串创建的内容看起来不像list。我应该如何修改代码？
提问于 2016-02-15 08:22:14
在我的页面上，当我点击课程标题时，课程描述必须显示在div中(带有id="prgdesc_rest")。当课程描述仅仅是一个句子(没有任何li标记)时，结果就会很好(见图1)。
但是当课程描述包含ul li时，这只会显示这些标签(见图2)。
我想做一些字符串操作，并动态创建ul和li元素。应该用my_jquery_functions2.js编写哪些代码以使其看起来像项目符号列表(见图3)？
-CoursesPage.jsp--
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title>Insert title here</title>
<script src="css/jquery.min.js"></script>
<script src="css/bootstrap.min.js"></script>
<script type='text/javascript' src='css/jquery.marquee.min.js'></script>
<script src="css/my_jquery_functions2.js"></script>
<script>
var courseObj = JSON.parse('{ "courses":[{"courseId":"1001","courseTitle":"Core Java","courseDescription":"Core Java, OOPs, Multithreading, IO"},{"courseId":"1002","courseTitle":"Java Web Development","courseDescription":"<ul><li>Servlet</li><li>JSP</li></ul>"}]}');
</script>
</head>
<body>
<div data-pauseOnHover="true">
<i><a href="#"><label style="color:blue" id='1001'>Core Java </label></a></i><br><br><br><br>
<i><a href="#"><label style="color:blue" id='1002'>Java Web Development </label></a></i><br><br><br><br>
</div>
You clicked
<div id="pdesc"><span style="color:blue" id="prgdesc_before"></span>-<br><br><br><br>
Course Description
<div id="prgdesc_rest">
<ul><li>Chapter 1</li><li>Chapter 2</li></ul>
</div></div>
</body>
</html>-我的jquery_functions2.js s2.js--
$(window).load(function(){
for (var i = 0; i < courseObj.courses.length; i++) {
var courseId = courseObj.courses[i].courseId;
var courseDescription = courseObj.courses[i].courseDescription;
$("#" + courseId).data('course_index', i);
$("#" + courseId).click(function() {
var course_index = $(this).data('course_index');
$("#prgdesc_before").text(courseObj.courses[course_index].courseTitle);
$("#prgdesc_rest").text(courseObj.courses[course_index].courseDescription);
});
}
});
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-15 08:45:43
在设置内容时使用.html()而不是.text()。.text()转义传递给它的任何HTML，因此它会像第二个图像一样显示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35404475
复制相关文章
相似问题
腾讯云开发者
