jquery - オーバーフローリストの要素のサイズを変更して画面に合わせるにはどうすればよいですか?

Question

私はこれをしたい：

N要素のインラインリストがあります。要素はそれぞれ異なる幅にすることができ、リストは画面からはみ出す可能性があります。すべての要素が画面に収まるように、各アイテムの幅を設定する必要があります。

問題：

しかし、1 つ問題がありました。ウィンドウのサイズを最小に変更してから、最初の幅に再び伸ばすと、すべての要素の幅は等しくなります-元の比率が失われ、各リストに不必要にさまざまな幅のテキストが書き込まれる可能性があります。

考えられる解決策:

配列内の各項目の幅を記憶し、ウィンドウを折りたたんだ後に、配列に格納されている幅まで幅を増やすことができます。配列に連絡し、リスト項目は arr (N) および ul.list li: nth-child (N) にすることができます。別の解決策があるかもしれません。

そして、私はこれを行う方法がわかりません、助けてください:)

score 1 · Accepted Answer

これがあなたが求めているものかどうかはわかりませんが、属性を使用して初期幅を保存できます。

 $(document).ready(function() {
    $('ul.list li').each(function(index) {
        $(this).attr("initial-width",$(this).innerWidth());
    });

次に、代わりに

     $(this).innerWidth($(this).innerWidth() - res);

使用する

     $(this).innerWidth($(this).attr("initial-width") - res);