Question

所以，我有一段看起来像这样的HTML代码：

<span class="name">SOMEUSERNAME<span class="meta">20 friends</span></span>

使用简单的$(".name")我可以很容易地在内部，但有没有办法只获取没有元数据的用户名？我知道我可以使用RegEx，但我宁愿知道是否可以直接使用jQuery选择器，因为我对这个东西还有点新鲜。

Answer 1

似乎没有jQuery会更容易

document.querySelectorAll('.name')[0].firstChild.nodeValue

FIDDLE

您可以执行更多元素

var users = Array.prototype.slice.call(document.querySelectorAll('.name')).map(function(el) {
    return el.firstChild.nodeValue;
});

FIDDLE

或旧版浏览器

var elems = document.querySelectorAll('.name');
    users = [];

for (var i=elems.length; i--;) {
    users.push(elems[i].firstChild.nodeValue);
}

FIDDLE

或更多jQuery'ish

var users = $.map($('.name'), function(el) {
    return el.firstChild.nodeValue;
});

FIDDLE

Answer 2

试试这个：

var name = $('#name').clone();
name.find('.meta').remove();
console.log(name);

希望这有帮助。

Answer 3

不确定这是最有效的方法，但这应该有效：

$('.name').clone().children().remove().end().text();

编辑：这是一个更有效的解决方案：

var text = $.map($('.name').contents(), function(node) {
    return node.nodeType === 3 ? node.nodeValue : '';
}).join('');

编辑：只是为了好玩，这里有一个潜在的“更惯用”的jQuery方法：

var text = $($('.name').contents()).filter(function() {
    return this.nodeType === 3;
}).map(function() {
    return this.nodeValue;
}).get().join('')

Answer 4

试试这个，如果你只想要用户名（没有20个朋友的东西）

$(".name").clone().children().remove().end().text();

http://jsfiddle.net/9GEfY/

Answer 5

.contents()将返回所有子节点，包括文本节点。你可以这样做：

http://jsfiddle.net/MnCDb/

$(".name").contents().get(0).textContent;

Answer 6

你为什么不尝试这样？

 <span class="name" id="name">SOMEUSERNAME
 <span class="meta" id="meta">20 friends</span>
 </span>
 <button onClick="foo()">click me </button>

 <div id='result'></div>
 <script>

 function foo(){
 var names=document.getElementById('name').innerHtml;
 document.getElementById('result').innerHtml=names;
 }


 </script>

Answer 7

$('span').filter(function(){return this.className=='name'}).get(0).firstChild;

<强> jsFiddle example

获取没有子子的HTML

7 个答案: