7

目標は、ここで最も広い単語の幅を見つけることです。

テキストは、画像に示すように、さまざまなフォントの単語で構成された文章です。

フォント範囲 html は次のようになります。

<span style="font:bold 14px Verdana;">LONGESTW</span>
<span style="font:bold 42px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">regular</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 32px Verdana;">w</span>
<span style="font:bold 96px Verdana;">id</span>
<span style="font:bold 64px Verdana;">est</span>

したがって、ここでは 3 番目の単語が最も広いです。何か案は？すべてが html であり、あらゆるもの (jquery、ES5 手法など) を使用できます。

4

3 に答える 3

1

これは解決策のふりをしていると思います。

http://jsfiddle.net/WtcEQ/4/

于 2012-09-19T19:20:11.420 に答える
0

基本的にすべてのスパンで反復し、最も長い単語を見つけるソリューションの下で試してください。

$(function () {
    var max = 0, sum = 0, lword = '', mword = '';

    var $span = $('span');
    $.each($span, function (idx, el) {

        var elTxt = $(el).text().trim();

        if (elTxt) {
            sum += $(this).width();
            lword += $(this).text();
        }

       if (!elTxt || $span.length == (idx+1) ) {
            if (sum > max) {
                max = sum;
                mword  = lword;
            }
            sum = 0;
            lword = '';
        }
    });

    alert(mword + ' ' + max);
});

デモ: http://jsfiddle.net/WtcEQ/32/

于 2012-09-19T20:29:31.763 に答える