Question

我有这个HTML：

<div class="chip">java<span class="material-icons close">×</span></div>
<div class="chip">spring<span class="material-icons close">×</span></div>
<div class="chip">python<span class="material-icons close">×</span></div>

使用以下脚本，我尝试检索没有x的文本。我使用它们的类名获取div元素的值，但是当传递给它时，将返回相同的字符串而不进行任何拆分：

var skills = $('.chip').text();
var arr = skills.split('x');
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}

例如：

var skills = 'javaxspringxpython';

输出保持不变。我知道这是因为.text()方法，但不知道如何解决这个问题。我尝试使用.val()，但这不起作用。

我该如何解决这个问题？

Answer 1

您的HTML已经有三个独立的元素。

您可以获取标记的各个内容，而不是拆分组合文本，并从该内容中踢出任何其他标记（在您的案例中为span元素）。然后，您将拥有三个匹配的文本节点，然后您需要将这些节点映射到数组项：

＆＃13;

var skills = $('.chip').contents().filter(function() {
    return this.nodeType === 3; // only immediate text in div, not in span
}).map(function() {
    return $(this).text();
}).get();

console.log(skills);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chip">java<span class="material-icons close">×</span></div>
<div class="chip">spring<span class="material-icons close">×</span></div>
<div class="chip">python<span class="material-icons close">×</span></div>

＆＃13;

Answer 2

它为我工作..

$(document).ready(function() {
    var skills = $('.chip').text();
    var arr = skills.split('x');
    for(var i=0;i<arr.length;i++){
        // alert(arr[i]);
        console.log(arr[i]);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='chip'>javaxspringxpython</div>

希望它的工作!!!

快乐编码!!

如何拆分从`div`元素中检索的文本

2 个答案: