背景の横幅を越える要素は表示しないようにしたい

現在HTML,JavaScript(jQuery),CSSを使ってアプリ開発をしています。

以下のような画面を製作中です。

このように背景と文字幅に合わせた枠線があって、これを

背景の横幅を越える枠線は表示しないようにしたいのです。
ここでは「文字幅に合わせた枠線３」を含むそれ以降の要素を非表示にしたいです。

もちろん非表示は.hide()を使ったりすればいいとわかっています。

知りたいのは、背景の横幅を越える要素をどのように判断し、それ以降のものを非表示にするかです。

もしわかる方がいらっしゃれば教えていただきたいです。

最後に上画像のコードを載せます。よろしくお願い致します。

HTML
1
2<!DOCTYPE html>
3<html>
4<head>
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
6</head>
7<body>
8  <div style="height:100px; width:500px; background:aqua;" class="bg">
9    <span style="border:solid 1px; background:white;" class="bd">文字幅に合わせた枠線１</span>
10    <span style="border:solid 1px; background:white;" class="bd">文字幅に合わせた枠線２</span>
11    <span style="border:solid 1px; background:white;" class="bd">文字幅に合わせた枠線３</span>
12    <span style="border:solid 1px; background:white;" class="bd">文字幅枠線４</span>
13    <span style="border:solid 1px; background:white;" class="bd">文字幅枠線５！</span>
14  </div>
15</body>
16<script>
17$(function(){
18
19  // 背景の横幅を越える枠は表示しない。それ以降の枠も表示しない
20
21});
22</script>
23</html>
24

行動規範の内容に同意します

回答1件

ベストアンサー

こういうのはどうですか。画面をリサイズしたときに、それに応じて枠が出たり引っ込んだりするのが確かめられるよう、div.bg の width を 80% にしてあります。

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
5<style>
6div.bg {
7  height: 100px;
8  width: 80%;
9  background: aqua;
10}
11span.bd {
12  border: solid 1px;
13  background: white;
14}
15</style>
16</head>
17<body>
18  <div class="bg">
19    <span class="bd">文字幅に合わせた枠線１</span>
20    <span class="bd">文字幅に合わせた枠線２</span>
21    <span class="bd">文字幅に合わせた枠線３</span>
22    <span class="bd">文字幅枠線４</span>
23    <span class="bd">文字幅枠線５！</span>
24  </div>
25</body>
26<script>
27$(function() {
28  var redisplay = function() {
29    var bgWidth = $('div.bg').width();
30    var width = 0;
31    $('span.bd').each(function() {
32      var $bd = $(this);
33      width += $bd.outerWidth(true);
34      if (width > bgWidth) {
35         $bd.filter(':visible').hide();
36      } else {
37         $bd.filter(':hidden').show();
38      }
39    });
40  };
41  $(window).on('resize', redisplay);
42  redisplay();
43});
44</script>
45</html>

投稿2016/04/18 14:15

unau

総合スコア2468

k499778

2016/04/18 17:42 編集

毎度のことですが、回答有り難うございます。丁寧に書いてくださり本当に感謝しています。１つだけ質問なのですが、 var $bd = $(this); の部分でここだけ変数に「$」がついているのは「明示的に参照変数ということを示している」ということでしょうか？そういう意図のもとという解釈をしてもよろしいのでしょうか？お忙しいとは思いますが、お時間あるときにお答えいただければなと思います。

unau

2016/04/18 21:34

あ、ごめんなさい。これは私なりの慣習で、jQuery の wrap 集合インスタンス、すなわち、$(セレクタ) や $(要素) を実行したら返ってくるものの先頭に $ をつけるようにしている、というものです。たまに採用している人がいるようです。プログラミングしていると、最初は一回しか呼ばないから変数に入れるまでもないものも、何回か利用するようになったから変数にしちゃおう、ということがあります。たとえば、 $('#messageArea') としていたけれど、これを何回か利用するようになったので $messageArea に代入して使うようにする、とか。このように $ をつける習慣になっていると、$ のついていいない変数に対して wrap 集合のメソッドを呼んでいる箇所 (たとえば div.addClass('selected') とか) があると、「あれ、おかしいな」と思うようになったりならなかったりします。（アプリケーション）ハンガリアン記法の一種ですね。

k499778

2016/04/18 22:54 編集

返答ありがとうございます。そうなんですね。ハンガリアン記法も少し調べてみます。処理の流れとしては outerWidth(true)でマージンも含めた幅を取り、それを変数width（要素全体の幅）に詰め込んでいく。 bgWidth（背景の幅）と変数width（要素全体の幅）を比較し、変数width（要素全体の幅）のほうが大きければ、その要素を非表示にする。といったところでしょうか。自分ではこのような書き方や発想を持っていなかったので、大変助かりました。ありがとうございます。深く感謝いたします。リサイズ処理で再現しやすくしていただきありがとうございました。

行動規範の内容に同意します