javascript - 根据 DIV 的内容将 DIV 替换为特定的类

Question

我有一些带有文本的 DIV，如下所示:

<div class="testclass"><b><i>1 Banana<i></b></div>
<div class="testclass"><b><i>2 Oranges<i></b></div>
<div class="testclass"><b><i>2 Peaches<i></b></div>
<div class="testclass"><b><i>1 Watermelons<i></b></div>
<div class="testclass"><b><i>1 Dragon Fruit<i></b></div>

我试图获取每个测试类中的文本并创建一个列表，如下所示:

    Banana
    Oranges
    Oranges
    Peaches
    Peaches
    Watermelons

我正在努力解决的是用什么都不替换数字，或者用重复项将新条目插入列表中。

到目前为止我所拥有的内容如下:

var fruits = $('.testclass').text();
fruits.replace(/1 /,"") ; 

这给了我一个如下所示的列表:

Banana
2 Oranges
2 Peaches
1 Watermelons

我对 jQuery 相当陌生，所以我不知道如何正确迭代列表或如何正确复制前面有 2 的条目。

Answer 1

试试这个:

var fruits = [];
$('.testclass').each(function(i, el) {
    var values = $(this).text().split(' ');
    for (var i = 0; i < values[0]; i++) {
        fruits.push(values[1]);
    }
});

输出:

["Banana", "Oranges", "Oranges", "Peaches", "Peaches", "Watermelons"]

Example fiddle

---

要满足名称中带有空格的水果(例如火龙果)，请尝试以下操作:

var fruits = [];
$('.testclass').each(function(i, el) {
    var values = $(this).text().split(' ');
    var count = parseInt(values.shift(), 10);
    for (var i = 0; i < count; i++) {
        fruits.push(values.join(' '));
    }
});

Updated fiddle