查找文本最多的元素答案

【问题标题】：Find the element with the most text查找文本最多的元素
【发布时间】：2013-11-14 16:04:04
【问题描述】：

是这样的：

text = $('#content').find('.text'),
length = 0;
longest = '';

$(text).each(function(){

  if($(this).text().length > length){
    length = $(this).text().length;
    longest = $(this);        
  }       

});

alert($(longest).text());

但是我可以不使用循环吗？我的意思是直接选择最长的文本元素？因为这太慢了

【问题讨论】：

没有循环你不能做到这一点..因为你必须检查所有的元素..
缓存对象会对你有所帮助。
什么都做不了，也许缓存$(this)和varthis.text().length，也不确定是否更快但绝对更好的是避免全局变量和更新它们，比如添加一个return varmaxlen到你的功能
为什么太慢了？元素太多，还是必须经常做？

标签： javascript jquery string string-length

【解决方案1】：

没有循环就无法做到这一点。没有内置的 DOM 函数来查找文本最长的元素，因此必须有一段代码遍历它们并找到最长的元素。

这是您的代码的清理版本：

var longestSoFar = -1;
var longestItem;

$('#content .text').each(function(){
    var text = $(this).text();
    if (text.length > longestSoFar) {
        longestSoFar = text.length;
        longestItem = this;
    }       
});

alert($(longestItem).text());

我能想到的唯一另一件事是首先比较 .text 元素的高度，然后找到比其他元素高的元素，然后仅比较这些元素的文本长度。这可能比计算文本的实际长度快很多，但它是否有用取决于您的布局以及高度是否是一个准确的过滤器。

为了进一步加快速度，我们可能必须查看您的 HTML 的一般外观，以了解减速的原因。 .text() 不是一个特别快的操作，因为它必须遍历给定元素中的所有文本节点并累积所有文本。如果元素中只有一个节点，则速度很快，但如果节点中涉及的 HTML 很多，那么它有很多节点和子节点要遍历才能找到所有文本节点。

请注意，在您的代码中，您正在从已经是 jQuery 对象的东西中创建一个 jQuery 对象。它是这样工作的，但是当它已经是一个 jQuery 对象时，它是对函数调用的浪费。

【讨论】：

我对默认 len 太偏执了，我会把默认最长的-1 或使用>=，因为我不知道如果每个人都是 0 len 会发生什么，我们做了一个打电话给longestItem.text()，但longestItem是空的
@ajax333221 - 好的，我将其更改为 -1，这样它就可以找到没有文本的项目（如果有的话）。我不确定 OP 真正想要什么行为。也许他们不想找到一个空的对象。仅供参考，$(undefined).text() 返回一个空字符串，因为 jQuery 非常认真地保护您在此处传递的任何内容，因此它的方式不会有任何问题。这实际上取决于没有文本时 OP 想要什么行为。
现在我很偏执，我们的-1 cmets 会不自觉地让人们下意识地回答-1，你看...我真的是个偏执狂

【解决方案2】：

纯脚本版本非常相似：

var longestSoFar = -1;
var longestItem;
var els = document.querySelectorAll('#content .text');

for (var i=0, iLen=els.length, len; i<iLen; i++) {
  len = (els[i].textContent || els[i].innerText).length;
  if ( len > longestSoFar) {
    longestItem = els[i];
    longestSoFar = len;
  }
}

alert(longestItem.textContent || longestItem.innerText);

【讨论】：

【解决方案3】：

其他方式使用get()将其保存到Array，然后使用使用长度作为排序方式而不是按字母顺序的函数对数组进行自定义排序，例如：

var listitems = $(".text").get();
listitems.sort(function(a, b) {
      var compA = $(a).text().length;
      var compB = $(b).text().length;
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;});

// Get the last element of the array which has the longest length
alert("Longest = "+$(listitems[listitems.length-1]).text());

见JSFiddle

【讨论】：

【解决方案4】：

fiddle DEMO

fiddle DEMO-1

var con = $('#content');
var arr = con.find('.text').map(function () {
    return $(this).text().length;
}).get();
var longest = arr.indexOf(Math.max.apply(Math,arr));
alert($('#content .text:nth-child(' + ++longest + ')').text());

【讨论】：