将用逗号/空格分隔的名称插入到通过 jQuery 创建的 <li> 中

Posted 2023-04-14

【中文标题】将用逗号/空格分隔的名称插入到通过 jQuery 创建的 <li> 中

【英文标题】：Plug in Separated names by commas/spaces into <li> 's created via jQuery

【发布时间】：2011-07-11 21:41:19

【问题描述】：

我有几个用逗号分隔的演员姓名，我正在尝试获取该列表中的每个姓名并将其插入到 ul 下动态创建的自己的 li 中，同时仅大写第一个字母并修剪逗号/空格（唯一不应该修剪的空格是“john lock”之间，因为名称之间没有逗号），如下所示：

var cast = ('jack, kate ,sawyer , john lock ,, hurley')

<ul id="cast-members">
<li>Jack</li>
<li>Kate</li>
<li>Sawyer</li>
<li>John Lock</li>
<li>Hurley</li>
</ul>

知道如何使用 jQuery 来完成这项工作吗？

【参考方案1】：

应该这样做

var cast = 'jack, kate ,sawyer , john lock ,, hurley';
var castlist = cast.split(',');

var $ul = $('<ul>'); //create an in-memory <ul> element to hold our elements

$.each(castlist, function(idx,val) // for each item in the split array
    var value = $.trim(val).replace(/\b\S/g, function(m)return m.toUpperCase();); // trim and capitalize the item
    if (value.length > 0) // if its length > 0 (non-empty)
        var $li = $('<li>',  // create a <li> element
            html: $('<a>',  // set its html to be a new <a> element
                href:'Bio.html#'+value, // with a href
                text:value // and a text value
            )
        );
        $ul.append($li); // append our new <li> to the <ul>
    
);
$('.lost-cast').append( $ul );  // append the filled <ul> in the /lost-cast element 

http://jsfiddle.net/gaby/gvb6n/ 上的演示

【讨论】：

所以我一直在尝试使用实时功能实现演示，但似乎无法使其正常工作。演示：jsfiddle.net/VzjZD/1 知道如何让它在现场工作吗？到目前为止，谢谢你，Gaby！

@Moving，您应该阅读cast 并在click 处理程序中创建castlist。演示在jsfiddle.net/gaby/VzjZD/2

神奇地发挥作用:) 知道如何使名称的第一个字母大写吗？

除了大写，我还有一个问题。我试图在文本之前的 之后添加一个 标记以链接到他们的传记，但这让我发疯了！这是我最新的尝试小提琴jsfiddle.net/VzjZD/3

@Moving gift，这里是 complete solution 你尝试做的事情..（添加了大写字母和链接以及一些 cmets..)