表示中の要素の個数を取得したい

###前提・実現したいこと
表題の通りですが、表示されている（:visibleの）要素の個数を取得したいと思っています。

###試したこと
※<li>の閉じタグに誤字があった（<li><li>となっていた）ため、ソースコードを修正いたしました。

html
1<div id="hoge">
2<li style="display:none;">リンゴ</li>
3<li>ゴリラ</li>
4<li style="display:none;">ラッパ</li>
5<li>パンツ</li>
6<li style="display:none;">ツバメ</li>
7</div>

上記のhtmlに対して以下のJSを実施しました（※修正前）。

Javascript
1$('#hoge li').each(function () {
2  var elm = $(this).is(':visible');
3  if (elm ==  true) {
4    var len =  $elm.length;
5    console.log(len); //undefined
6  }
7});

上記のhtmlに対して以下のJSを実施しました（※一部修正 / 最新）。

Javascript
1$('#hoge li').each(function () {
2  var elm = $(this).is(':visible');
3  if (elm ==  true) {
4    var len =  elm.length; //$elm → elm に修正
5    console.log(len); //undefined
6  }
7});

しかし上記のソースコードだとdisplay:noneではないelmの個数分、undefinedとなってしまいます。
どのように書けばよろしいでしょうか？
何卒よろしくお願い致します。

Lhankor_Mhy

2017/10/18 05:43

$elm.length; の時点で $elm は初登場ですね。elm の typo では？

退会済みユーザー

2017/10/18 05:48

ご指摘ありがとうございます。誤字失礼致しました。ソースコードを修正致しました。

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

回答2件

ベストアンサー

相当タイプミスだらけのソースですがこんな感じですか？

javascript
1$(function(){
2  var len=$('#hoge li').filter(':visible').length;
3  console.log(len);
4});

HTML
1<ul id="hoge">
2<li style="display:none;">リンゴ</li>
3<li>ゴリラ</li>
4<li style="display:none;">ラッパ</li>
5<li>パンツ</li>
6<li style="display:none;">ツバメ</li>
7</ul>

投稿2017/10/18 05:48

yambejp

総合スコア117615

退会済みユーザー

2017/10/18 05:52

ご回答ありがとうございます。タイプミスで見づらく失礼致しました。ご指摘の方法で実現できました。このような際にもfilterを使用すれば良いのですね。勉強になりました。ありがとうございます。

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

コードをコピペしてブラウザで表示してみてください。
eachで何かしたい場合はコード修正しますのでおっしゃってください。
※</li>閉じタグがなかったのでコードを修正しました。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5</head>
6<body>
7
8	<div id="hoge">
9		<li style="display:none;">リンゴ</li>
10		<li>ゴリラ</li>
11		<li style="display:none;">ラッパ</li>
12		<li>パンツ</li>
13		<li style="display:none;">ツバメ</li>
14	</div>
15
16	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
17	<script>
18		$(function()
19		{
20			var count = $('#hoge li:visible').length;
21			console.log(count);
22		});
23	</script>
24</body>
25</html>