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
第二我需要在前面的步骤中将删除的文本设置为title span，前面没有连字符。

我的最终输出将是这样的

<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

获取span中的div列表。
迭代每个span并使用基于.split()的 - 拆分文本，以便设置标题和文字。

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
});

jQuery最好的方法来遍历HTML并动态添加工具提示

1 个答案:

JSFiddle