jQuery遍历HTML和添加工具提示的最佳方式 - 动态

Question

我有以下代码（Div内的无序列表）

<div id="sample">
    <ul class="choice">
        <li class="test">
<span>12.2 - Some Text 123</span>
        </li>
        <li class="test">
<span>QWW.22.333 - Some Text 23</span>
        </li>
        <li class="test">
<span>Qd - Some Text 12</span>
        </li>
    </ul>
</div>

尝试用jQuery实现两件事。

• 首先，我需要删除所有span中的文本（"- 一些文本..."）
• 其次，我需要将前面步骤中删除的文本设置为前面没有连字符的span的title。

我的最终输出将是这样的

<div id="sample">
    <ul class="choice">
        <li class="test"> <span title="Some Text 123">12.2</span>
        </li>
        <li class="test"> <span title="Some Text 23">QWW.22.333</span>
        </li>
        <li class="test"> <span title="Some Text 12">Qd</span>
        </li>
    </ul>
</div>

我使用 jQuery 可以做到这一点的最佳方法是什么？

Answer 1

1. 获取该div中span的列表。
2. 根据-使用.split()迭代每个span并拆分其文本，以便设置标题和文本。

---

var lsSpans = $('#sample').find('span'); //returns the list of spans within it
$.each(lsSpans, function (i, j) {
   var txt = $(this).text().split('-'); //split the text in span
   $(this).attr('title', txt[1]);       //Set title attribute
   $(this).text(txt[0]);                //replace the text with float number
});

JSFiddle