Jquery追加函数,向有序列表和无序列表添加更多元素

时间:2016-04-14 11:10:48

标签: javascript php jquery append

我有两个问题:

Q1.我无法将所有元素添加到ol和ul。仅添加第一个元素,而其他元素没有响应。请帮我解决这个问题。 Q2.I想在每个带序列号的元素的ol之间添加ul。所以它对我的网站看起来不错。

请找到以下输出链接: http://www.ankooverseas.com/select_university.php

2 个答案:

答案 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)

&#13;
&#13;
    $(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;
&#13;
&#13;

更新了它,我认为您正在寻找此输出,更改Js代码