JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScript（jQuery）で同じクラスを持つ複数要素の空白を一括削除する方法

はじめに

Webページ内で同じクラス名を持つ複数の要素から、テキスト中の空白をまとめて削除したいケースはよくあります。このような場合、jQueryのドット(.)セレクターとeach()メソッドを組み合わせることで、すべての対象要素に対して一括処理を行うことができます。

実装例

以下がそのコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <p class="demo">Javascript Tutorial</p>
   <p class="demo">MySQL Tutorial</p>
   <p class="demo">MongoDB Tutorial</p>
</body>
<script>
   $(".demo").each(function (i, element) {
      $(element).html($(element).html().split(" ").join(""));
   });
</script>
</html>

コードの仕組み

このコードでは、まず$(".demo")によってclass="demo"を持つすべての要素を取得しています。続いて.each()メソッドで各要素を順番に処理し、.split(" ").join("")を使ってテキスト内のすべての半角スペースを除去した後、.html()で元の内容を書き換えています。

プログラムの実行方法

上記のプログラムを実行するには、ファイルを「anyName.html」（または index.html）という名前で保存します。その後、ファイルを右クリックし、VS Codeエディターの拡張機能「Live Server」を使って「Open with Live Server」を選択してください。ブラウザ上でページが開き、スクリプトが自動的に実行されます。

実行結果

上記のコードを実行すると、以下のような出力が得られます。

JavaScript（jQuery）で同じクラスを持つ複数要素の空白を一括削除する方法

このように、「Javascript Tutorial」→「JavascriptTutorial」、「MySQL Tutorial」→「MySQLTutorial」というように、同じクラスを持つすべての段落テキストから空白が取り除かれて表示されます。replace(/ /g, "")や正規表現を用いる方法もありますので、用途に応じて使い分けるとよいでしょう。

  1. JavaScriptで画面解像度を検出する方法を解説！window.screenの使い方

    はじめにWebアプリケーションを開発する際、ユーザーの画面解像度（スクリーンサイズ）を検出したいケースは多くあります。例えば、レスポンシブデザインの調整や、表示領域に応じたコンテンツの出し分けなどが挙げられます。JavaScriptでは、window.screenオブジェクトを使うことで、簡単に画面の解像度情報を取得できます。この記事では、その具体的な方法をサンプルコードとともにわかりやすく解説します。window.screenオブジェクトとはwindow.screenは、ユーザーが使用しているディスプレイ（画面）に関する情報を保持しているオブジェクトです。このオブジェクトのプロパティを参照す

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド