Javascript 获取所选元素jQuery中的文本
我正在使用Javascript 获取所选元素jQuery中的文本,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用jQuery创建一个应用程序,并且正在使用向左滑动处理程序。当我在'li'元素上向左滑动并使用: console.log($(event.target.text()) 我在控制台中得到以下信息 意大利人 “IHOP” 我需要获得“IHOP”才能继续。我找不到。我用过 console.log($(event.target).find('.list-group-item').text()) 但它什么也没给我。但是,如果我使用console.log($(event.target)
jQuery
创建一个应用程序,并且正在使用向左滑动处理程序。当我在'li'
元素上向左滑动并使用:console.log($(event.target.text())代码>
我在控制台中得到以下信息
意大利人 “IHOP” 代码>
我需要获得“IHOP”
才能继续。我找不到。我用过
console.log($(event.target).find('.list-group-item').text())代码>
但它什么也没给我。但是,如果我使用console.log($(event.target).find('.badge').text())代码>
我有意大利语
。这里有什么魔法
有人能帮忙吗
$(event.target)
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text(); //get the text of element
我需要让“IHOP”继续
听起来您希望文本直接包含在li
中,而不是包含在任何子元素中。这里有一个方法:
var theText = $(event.target).contents().filter(function() {
return this.nodeType === 3;
}).text();
(请参见下面的备选方案。)
它用于获取元素的内容(包括子元素、文本节点和注释),然后过滤掉除文本节点以外的所有内容(nodeType==3
),然后将该文本作为字符串获取
您可能希望在其中添加一个以消除前导空格和尾随空格,因此:
var theText = $.trim($(event.target).contents().filter(function() {
return this.nodeType === 3;
}).text());
备选方案:
在您的示例标记中:
<li class="list-group-item"> <span class="badge">Italian</span> "IHOP" </li>
如果您不能指望它是最后一项,而这是您需要经常做的事情,那么您可以添加一个插件来完成,如下所示:
(function($) {
$.fn.immediateText = function(trim) {
var rv = this.contents().filter(onlyTextNodes).text();
if (trim) {
rv = $.trim(rv);
}
return rv;
};
function onlyTextNodes() {
return this.nodeType === 3;
}
})(jQuery);
然后使用它:
var theText = $(event.target).immediateText(true);
如果您关心性能,那么不要在不需要的地方使用jQuery。如果编写一个函数,一个简单的示例将显示以下内容,在大多数普通js中,它的运行速度将比公认的答案快大约3倍:
(function($) {
$.fn. childText = function () {
var children = this[0].childNodes;
var text = '';
for (var i=0, iLen=children.length; i<iLen; i++) {
if (children[i].nodeType == '3') {
text += children[i].data;
}
}
return text;
}
}(jQuery));
您试图回答的问题是他提出的关于如何在没有子元素文本的情况下获取IHOP的问题。该问题不包含id为foo
的元素,是否有较小的代码@157247?@user3257902:我添加了一个替代方案。Hatsjoem的答案也有效,有人可能会说它比我上面的第一个例子要短,尽管不比另一个例子短。因此,如果你不能依赖于你想要成为最后一个节点的文本(上面我的“备选方案”),你可以使用它。@t-j-crowder,你的备选方案没有work@user3257902:是的,是这样的:可能是您想要此
,而不是事件。目标
(请参见对问题的评论)。鉴于结构,您几乎肯定希望使用此
而不是事件。目标
。我不知道刷卡处理程序,但如果它是点击处理程序,您肯定会想要它。
(function($) {
$.fn. childText = function () {
var children = this[0].childNodes;
var text = '';
for (var i=0, iLen=children.length; i<iLen; i++) {
if (children[i].nodeType == '3') {
text += children[i].data;
}
}
return text;
}
}(jQuery));
// Return the text of the child text nodes of an element,
// but not descendant element text nodes
function getChildText(element) {
var children = element.childNodes;
var text = '';
for (var i=0, iLen=children.length; i<iLen; i++) {
if (children[i].nodeType == '3') {
text += children[i].data;
}
}
return text;
}
var theText = getChildText(event.target);