Question

我正在使用jQuery创建一个应用程序，我正在使用一个向左滑动处理程序。当我在'li'元素上向左滑动并使用：
console.log($(event.target).text());。

我在控制台中获得以下内容 <li class="list-group-item"> <span class="badge">Italian</span> "IHOP" </li>

我需要让"IHOP"继续。我无法找到。我用过

console.log($(event.target).find('.list-group-item').text());

但它什么都没给我。但是，如果我使用console.log($(event.target).find('.badge').text());。

我得到Italian。这里的巫术是什么！

有人可以帮忙吗？

Answer 1

$(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

Answer 2

我需要让“IHOP”继续进行。

听起来您希望li直接包含文本，而不是任何后代元素包含的文本。这是一种方式：

var theText = $(event.target).contents().filter(function() {
    return this.nodeType === 3;
}).text();

（请参阅下面的替代方案。）

使用contents获取元素的内容（包括子元素，文本节点和注释），然后使用filter过滤掉除文本节点（nodeType === 3）之外的所有内容，然后text将该文本作为字符串。

您可能希望在其中添加$.trim以删除前导和尾随空格，因此：

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>

...您想要的文本始终是li中的 last 节点，因此如果可靠，您可以这样做：

var theText = $.trim($(event.target).contents().last().text());

如果您不能依赖它作为最后一项，并且这是您经常需要做的事情，您可以添加一个插件来执行此操作，如下所示：

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

Answer 3

如果您关心性能，请不要在不需要的地方使用jQuery。如果编写一个函数，一个简单的jsperf test显示以下内容，大多数普通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));

以下普通javascript的速度要快6到10倍，具体取决于浏览器：

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

获取所选元素jQuery中的文本

3 个答案: