Question

我正在尝试为使用jquery selectable进行的每个选择维护一个<li>的列表

这是HTML的基本模板

<div class="content">
    <div class="contentreplace"></div>
    <div class="buildoptions"><?=$buildoptions?></div>
</div>

$buildoptions是：

<p id="feedback">
    <span>You've selected:</span> 
<div id="select-result"><ul class='ul-depend'>Nothing Selected</ul></div>
</p>

这是我的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)
    });

  }
});
});

这是可选的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 }

＆GT;

所以，理论上，当他们选择一个项目时，它不应该附加到#select-result ul无序列表，并添加<li>字符串吗？任何人都明白为什么它不会？

我测试了它，我从.ui-selected区域收到了正确的数据，并将数字输入到字符串中。

由于

Answer 1

你没有向ul附加任何内容，因为你要用行

删除它

$('#select-result').empty().append(html2);

Answer 2

$('#select-result').empty()将删除#select-result元素中的所有元素。因此$("#select-result ul.ul-depend")不是有效的选择器。我修改了你的代码，它现在正在运行。

将steps元素添加到标记

<div id="select-result">
    <div class='steps'></div>
    <ul class='ul-depend'>Nothing Selected</ul>
</div>

然后清除它，

$('#select-result .steps').empty().append(html2);

并清除ul，

$("#select-result ul.ul-depend").empty();

这是工作样本， http://jsfiddle.net/FBY8y/

jquery追加将li添加到ul

2 个答案: