当前位置：文江博客话题详情

Jquery：获取包含最多字符/最长的H2的宽度

发布于 2024-09-27 06:34:44 字数 78 浏览 3 评论 0原文

我正在尝试选择包含最多字符的 H2，或者宽度最宽的 H2，无论哪一个更简单，或者如果您知道如何做到这一点，您可以同时放置两者吗？我不确定语法。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余厌 2024-10-04 06:34:44

要获得最宽的像素，您可以通过滥用 .width() 函数，例如：

var cw = 0, widest;
$("h2").width(function(i, w) { if(w > cw) {widest = this; cw = w;} return w; });
//widest == widest h2 element
//$(widest).addClass("widest");

您可以在此处测试。在这个函数中，w是当前宽度，所以我们只是看看它是否比我们当前最宽的宽度更宽，如果是，则将当前宽度设置为新的最宽和最宽更改为比之前最宽的当前

。

您可以使用 .text() 对字符计数执行类似的操作：

var cw = 0, widest;
$("h2").text(function(i, t) { if(t.length > cw) {widest = this; cw = t.length;} return t; });
$(widest).addClass("widest");

< a href="http://jsfiddle.net/nick_craver/zAGLP/1/" rel="nofollow">您可以在此处测试该版本。

To get the pixel-widest, you could just loop though kind of abusing the .width() function, for example:

var cw = 0, widest;
$("h2").width(function(i, w) { if(w > cw) {widest = this; cw = w;} return w; });
//widest == widest h2 element
//$(widest).addClass("widest");

You can test it out here. Inside this function w is the current width, so we're just seeing if it's wider than our current widest, and if so setting the current width to the new widest and widest to the current <h2> that was found to be wider than the previous widest.

You can do something similar for character count using .text():

var cw = 0, widest;
$("h2").text(function(i, t) { if(t.length > cw) {widest = this; cw = t.length;} return t; });
$(widest).addClass("widest");

You can test that version here.

回复收藏 0 原文

遇见了你 2024-10-04 06:34:44

它们都非常相似，您必须遍历每一个并检查每个长度或宽度。您可以用

var maxWidth = 0;

function getLongest(){
  var elementWidth,
    domNode;

  $("h2").each(function(i, element){
    elementWidth = $(element).width();
    if (elementWidth > maxWidth){
      domNode = element;
      maxWidth = elementWidth;
    }
  }
  return domNode;
}

$(element).width() 替换 $(element).text().length 并适当地重命名变量。

请注意，如果 2 个元素具有完全相同的宽度，则只会选择第一个元素。

They're both pretty similar, you'll have to iterate through each one and check for each length or width. Something like

var maxWidth = 0;

function getLongest(){
  var elementWidth,
    domNode;

  $("h2").each(function(i, element){
    elementWidth = $(element).width();
    if (elementWidth > maxWidth){
      domNode = element;
      maxWidth = elementWidth;
    }
  }
  return domNode;
}

You can substitute $(element).width() for $(element).text().length and rename vars appropriately.

Note that if 2 elements have the exact same width, this will only select the first one.

回复收藏 0 原文

夜吻♂芭芘 2024-10-04 06:34:44

$(document).ready(function() {
    var longestH2 = null;
    $("h2").each(function(k, v) {
        if ($(v).width() > $(longestH2).width() || longestH2 == null) longestH2 = v;
    });
    $(longestH2).css("border", "3px solid red");
});

$(document).ready(function() {
    var longestH2 = null;
    $("h2").each(function(k, v) {
        if ($(v).width() > $(longestH2).width() || longestH2 == null) longestH2 = v;
    });
    $(longestH2).css("border", "3px solid red");
});

回复收藏 0 原文

~没有更多了~