[英]jquery append to add li to ul
I am trying to maintain a list of <li>
's for every selection made using jquery selectable 我正在尝试为使用jquery selectable进行的每个选择维护一个
<li>
列表
Here is my basic template for the HTML 这是我的HTML基本模板
<div class="content">
<div class="contentreplace"></div>
<div class="buildoptions"><?=$buildoptions?></div>
</div>
$buildoptions
is : $buildoptions
是:
<p id="feedback">
<span>You've selected:</span>
<div id="select-result"><ul class='ul-depend'>Nothing Selected</ul></div>
</p>
Here is my javascript: 这是我的javascript:
$(function() {
$( ".selectable" ).selectable({
stop: function() {
var html2 = "<div class='steps'> Select the dependant Field </div>";
$('#select-result').empty().append(html2);
var html = "";
$( ".ui-selected", this ).each(function() {
var ecid = $(this).data('ecid');
var field = $(this).data('field');
html = "<li class='depend' data-field='"+field+"' data-ecid='"+ ecid+"'>"+ecid+" - "+field+"</li>";
$("#select-result ul.ul-depend").append(html)
});
}
});
});
Here is selectable html: 这是可选的html:
<span class="ecdataset"><?=$stuff[0]['dataset']?></span>
<span class="ecvisit"><?=$stuff[0]['visit']?></span>
<ol class="selectable">
<?php
foreach ($stuff as $variable)
{?>
<li class="ui-widget-content" data-field="<?=$variable['field']?>" data-ecid="<?=$variable['ecspecs_id']?>">
<textarea ><?=$variable['ecnum']?></textarea>
<span class="ecfield"><?=$variable['field']?></span>
</li>
<?php }
?> ?>
So, in theory, When they select an item, shouldn't it append to the #select-result ul
unordered list, and add the <li>
string? 所以,理论上,当他们选择一个项目时,它不应该附加到
#select-result ul
无序列表,并添加<li>
字符串? Anyone see why it wouldnt? 任何人都明白为什么它不会?
I have tested it, and I am receiving the correct data from the .ui-selected
area and feeding numbers into the string. 我测试了它,我从
.ui-selected
区域接收正确的数据并将数字输入字符串。
Thanks 谢谢
你没有向ul附加任何内容,因为你要删除它
$('#select-result').empty().append(html2);
$('#select-result').empty()
will remove all the elements inside the #select-result
element. $('#select-result').empty()
将删除#select-result
元素中的所有元素。 So $("#select-result ul.ul-depend")
is not a valid selector. 所以
$("#select-result ul.ul-depend")
不是有效的选择器。 I have modified your code and it is working now. 我修改了你的代码,它现在正在运行。
add steps
element to the markup, 将
steps
元素添加到标记中,
<div id="select-result">
<div class='steps'></div>
<ul class='ul-depend'>Nothing Selected</ul>
</div>
and clear it instead, 而是清除它,
$('#select-result .steps').empty().append(html2);
and clear ul
as well, 并清除
ul
,
$("#select-result ul.ul-depend").empty();
here is the working sample, http://jsfiddle.net/FBY8y/ 这是工作样本, http://jsfiddle.net/FBY8y/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.