jQueryを使用してクラスごとに要素を効率的にカウントするにはどうすればよいですか?-CSSチュートリアル-php.cn

jQueryを使用してクラスごとに要素を効率的にカウントするにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-30 21:41:02

オリジナル

1012 人が閲覧しました

How to Efficiently Count Elements by Class with jQuery?

jQuery を使用してクラスごとに要素を効率的にカウントする方法

同じクラスの要素をカウントすることは、Web 開発における一般的なタスクです。これは、新しい要素を追加して識別する必要があるフォームなどの動的コンテンツを管理する場合に特に役立ちます。 jQuery では、クラスごとに要素をカウントする方法がいくつかあります。

最も簡単な方法は、.length プロパティを使用することです。

// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length;

ログイン後にコピー

このアプローチでは、クラス内の要素の数に直接アクセスします。

例:

<html>
<head>
  <script src="jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      var count = $('.element-class').length;
      console.log("Number of elements with class 'element-class': " + count);
    });
  </script>
</head>
<body>
  <div class="element-class">Element 1</div>
  <div class="element-class">Element 2</div>
  <div class="different-class">Different Element</div>
</body>
</html>

ログイン後にコピー

jQuery を使用する場合、コードのパフォーマンスへの影響を考慮することが重要です。特定のクラスの要素の数が 2 未満であることがわかっている状況では、:first セレクターまたは :last セレクターを使用してそれぞれ最初または最後の要素を取得し、長さプロパティを検査する方が効率的です。これにより、DOM トラバーサルの数が減り、パフォーマンスが向上します。

// Gets the number of elements with class yourClass (less than two)
var numItems;
if ($('.yourclass').first().length) {
  // There's at least one element
  numItems = 1;
} else {
  numItems = 0;
}

ログイン後にコピー

追加のヒント