使用Javascript/jQUery在HTML中测量字符串长度

我试图运行一个定制脚本，根据h4元素中字符串的长度添加一个样式类。基本上，如果h4足够长，可以占用2行，我会调整CSS，使具有两行标题的h4也与具有单行标题的h4对齐

一点JQuery将返回所有标记及其内容

jQuery(document).ready(function($){
  $('div.post-content div.title-info h4 a').text(function(){
      console.log(this);
  });
});

这就回来了

<a href=​"http:​/​/​www.theaterunder30.com/​farewell-to-amazing-grace/​">​Farewell to Amazing Grace​</a>​
<a href=​"http:​/​/​www.theaterunder30.com/​details-announced-for-harry-potter-and-the-cursed-child/​">​Details Announced for “Harry Potter and the Cursed Child”​   </a>​
<a href=​"http:​/​/​www.theaterunder30.com/​another-blog-post/​">​Another Blog Post​</a>​
<a href=​"http:​/​/​www.theaterunder30.com/​arrested-development-quotes/​">​Arrested Development Quotes​</a>​

​
​
​
​

这很好。但这只是谜题的一部分。我需要能够只计算标记中的字符数，然后使用.length之类的值来确定它是否大于X个字符数执行{…}

我不确定如何访问标签之间的文本？为了在上面跑一段距离。我已经看过了，但我真的不知道如何把它应用到我的情况。任何帮助或指导都会很棒

---

谢谢你的关注

您想使用jQuery

.text（）

获取文本：

jQuery(document).ready(function($){
  $('div.post-content div.title-info h4 a').each(function(){
      console.log($(this).text().length);
      //Conditional logic based on text length here
  });
});

---

您想使用jQuery

.text（）

获取文本：

jQuery(document).ready(function($){
  $('div.post-content div.title-info h4 a').each(function(){
      console.log($(this).text().length);
      //Conditional logic based on text length here
  });
});

---

我想你在寻找：

$(document).ready(function($){
                                         // V-- each not text!
  $('div.post-content div.title-info h4 a').each(function(){
    console.log($(this).text());
  });
});

输出：

​再见了，神奇的恩典​

​《哈利·波特与被诅咒的孩子》详情揭晓​

​另一篇博文​

​拘捕发展引述​

---

我想你在寻找：

$(document).ready(function($){
                                         // V-- each not text!
  $('div.post-content div.title-info h4 a').each(function(){
    console.log($(this).text());
  });
});

输出：

​再见了，神奇的恩典​

​《哈利·波特与被诅咒的孩子》详情揭晓​

​另一篇博文​

​拘捕发展引述​

---

检查文本的长度，如果它比您想要的长（在本例中为20个字符），只需添加一个css类

$('a').each(function(){
    length = $(this).text().length;
    if(length > 20) {
        $(this).addClass('long');
    }
});

---

您可以看到它正在处理这个JS提琴：

检查文本的长度，然后如果文本长度超过您想要的长度（在本例中为20个字符），只需添加一个css类即可

$('a').each(function(){
    length = $(this).text().length;
    if(length > 20) {
        $(this).addClass('long');
    }
});

---

---

你可以看到它在这个JS提琴上工作：

通过标签之间的文本，你是指元素内容吗？试试控制台日志$（this）.text（）@是的，那会有帮助。我对“this”的工作原理感到困惑，并假设上面使用它的“this”应该输出应用了.text（）的jQuery选择器。标签之间的文本是指元素内容吗？请尝试控制台日志$（this）.text（）@是的，这会有所帮助。我对“this”的工作原理感到困惑，并假设我在上面使用它的方式应该输出应用了.text（）的jQuery选择器。这实际上是无效的。你不应该调用

.text（function（））

。这个示例运行了两次

.text（）

函数，这毫无意义。我删除了我的答案，并投了你的票，只是因为你编辑了它，但真正的问题是你的答案不对，伙计；）我明白我错在哪里了！谢谢@DenimChicken，我以为我在调用.text（）函数，所以在它输出HTML时也会感到困惑，不理解.text（）应该应用于console.log（）而不是jQuery选择器。这确实是无效的。你不应该调用

.text（function（））

。这个示例运行了两次

.text（）

函数，这毫无意义。我删除了我的答案，并投了你的票，只是因为你编辑了它，但真正的问题是你的答案不对，伙计；）我明白我错在哪里了！谢谢@DenimChicken，我以为我在调用.text（）函数，所以在它输出HTML时也会感到困惑，我不明白.text（）应该应用于console.log（）而不是jQuery选择器。这使用了

.text（function（））

以无效的方式。解释如何操作？您可以看到它再次使用.text函数在JS Fiddle上工作两次，没有意义。您对

.text（）

的第一次方法调用没有意义，它应该是

。each（）

@AdamKonieska文本函数只返回文本，回调没有意义。只是：length=$（'a'）.text（）.length此使用的

.text（function（）

无效。请解释如何使用？您可以看到它再次使用.text函数在JS Fiddle上工作两次，没有意义。您对

.text（）

的第一个方法调用没有意义，它应该是

.each（）

@AdamKonieska文本函数只返回文本，回调没有意义。just:length=$（'a'）.text（）.lengthPhillips谢谢！代码也是实心的！Phillips谢谢！代码也是实心的！