我有两个问题:
Q1.我无法将所有元素添加到ol和ul。仅添加第一个元素,而其他元素没有响应。请帮我解决这个问题。 Q2.I想在每个带序列号的元素的ol之间添加ul。所以它对我的网站看起来不错。
请找到以下输出链接: http://www.ankooverseas.com/select_university.php
答案 0 :(得分:0)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".add_univs").click(function() {
var parent = $(this).parent();
var univ_name = $('#univ_name',parent).text();
var course = $('#course',parent ).text();
var app_fee = $('#app_fee',parent ).text();
var tuition_fee = $('#tuition_fee',).text();
$("#shortlist_univs").append("<li>" + univ_name + "</li>");
$("#univ_data").append("<li>" + course + "</li>");
$("#univ_data").append("<li>" + app_fee + "</li>");
$("#univ_data").append("<li>" + tuition_fee + "</li>");
});
});
</script>
修改了你的脚本,添加了class =&#34; add_univs&#34;而不是html中的id
答案 1 :(得分:0)
$(document).ready(function() {
$(".add_univs").click(function() {
var parent = $(this).parent();
var univ_name = $('#univ_name',parent).text();
var course = $('#course',parent ).text();
var app_fee = $('#app_fee',parent ).text();
var tuition_fee = $('#tuition_fee',parent).text();
var ol = $('<ol>',{'id':'shortlist_univs'});
ol.append("<li>" + univ_name + "</li>").appendTo($('.selectedList'));
$('<ol>',{'id':'univ_data'}).append("<li>" + course + "</li>")
.append("<li>" + app_fee + "</li>")
.append("<li>" + tuition_fee + "</li>")
.appendTo(ol)
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="content">
<div id="enquiry_col">
<h1>Shortlist Universities on your own</h1>
<br/>
<label class="left">Name: </label><input class="left" type="text" size="15" maxlength="40" /><label class="middle">Contact:</label><input class="middle" type="text" size="15" maxlength="40"/><label class="right">E-mail:</label><input class="right" type="text" size="20" maxlength="40"/><br /><br />
<label class="select_label_text">Select Major:</label><select class="select_menu">
<option class="option_font">Computer Science</option>
<option class="option_font">Electrical Engineering</option>
<option class="option_font">Mechanical Engineering</option>
<option class="option_font">Civil Engineering</option>
</select>
<input type="button" value="Search"/>
<hr />
<div id="university_list_comp">
<div id="wichita_comp">
<label id="univ_name">Wichita State University</label><br />
<label id="course">Course: Computer Science</label><br />
<label id="app_fee">Application Fee: $50</label><br />
<label id="tuition_fee">Tution Fee:$15,400</label><br />
<button class="add_univs">Add</button>
</div>
<div id="franklin_comp">
<label id="univ_name">Franklin University</label><br />
<label id="course">Course: Computer Science</label><br />
<label id="app_fee">Application Fee: $60</label><br />
<label id="tuition_fee">Tution Fee:$12,000</label><br />
<button class="add_univs">Add</button>
</div>
<div id="gannon_comp">
<label id="univ_name">Gannon University</label><br />
<label id="course">Course: Computer Science</label><br />
<label id="app_fee">Application Fee: $70</label><br />
<label id="tuition_fee">Tution Fee:$15,000</label><br />
<button class="add_univs">Add</button>
</div>
<div id="wright_comp">
<label id="univ_name">Wright State University</label><br />
<label id="course">Course: Computer Science</label><br />
<label id="app_fee">Application Fee: $50</label><br />
<label id="tuition_fee">Tution Fee:$12,000</label><br />
<button class="add_univs">Add</button>
</div>
<div id="csula_comp">
<label id="univ_name">California State University-Los Angeles</label><br />
<label id="course">Course: Computer Science</label><br />
<label id="app_fee">Application Fee: $60</label><br />
<label id="tuition_fee">Tution Fee:$16,000</label><br />
<button class="add_univs">Add</button>
</div>
<div id="kent_comp">
<label id="univ_name">Kent State University</label><br />
<label id="course">Course: Computer Science</label><br />
<label id="app_fee">Application Fee: $80</label><br />
<label id="tuition_fee">Tution Fee:$11,000</label><br />
<button class="add_univs">Add</button>
</div>
</div>
<div id="university_list_elec">
<div id="bridgeport_elec">
<label>University of Bridgeport</label><br />
<label>Course: Electrical Engineering</label><br />
<label>Application Fee: $55</label><br />
<label>Tution Fee:$18,000</label><br />
<button>Add</button>
</div>
<div id="tamuk_elec">
<label>Texas A&M University-Kingsville</label><br />
<label>Course: Electrical Engineering</label><br />
<label>Application Fee: $45</label><br />
<label>Tution Fee:$16,550</label><br />
<button>Add</button>
</div>
<div id="umassl_elec">
<label>University of Massachusetts-Lowell</label><br />
<label>Course: Electrical Engineering</label><br />
<label>Application Fee: $35</label><br />
<label>Tution Fee:$17,550</label><br />
<button>Add</button>
</div>
<div id="csulb_elec">
<label>California State University-Long Beach</label><br />
<label>Course: Electrical Engineering</label><br />
<label>Application Fee: $65</label><br />
<label>Tution Fee:$17,350</label><br />
<button>Add</button>
</div>
</div>
</div>
<div id="quick_support">
<h1>Selected Universities</h1>
<p>
<div class="selectedList" ></div>
<ol id="shortlist_univs">
<ul id="univ_data">
</ul>
</ol>
</p>
&#13;
更新了它,我认为您正在寻找此输出,更改Js代码