jQuery: AJAXで読み込んだHTMLをセレクターで取得する方法

2024-04-03

jQueryセレクターをAJAXで読み込んだHTMLに使用する

jQueryでAJAXを使用する際、サーバーから取得したHTMLにjQueryセレクターを適用したい場合があります。しかし、デフォルトではセレクターは読み込まれたHTMLに適用されません。

解決策

以下の方法で、AJAXで読み込んだHTMLにjQueryセレクターを適用できます。

$.ajax()のsuccessハンドラー内でセレクターを使用する

$.ajax({
  url: "/path/to/file.html",
  success: function(data) {
    // 読み込まれたHTMLを要素としてラップ
    var $html = $(data);

    // セレクターを使用して要素を取得
    var $title = $html.find("h1");

    // タイトルを出力
    console.log($title.text());
  }
});

$.load()を使用する

$("#target").load("/path/to/file.html", function() {
  // セレクターを使用して要素を取得
  var $title = $(this).find("h1");

  // タイトルを出力
  console.log($title.text());
});

$.get()と$.Deferred()を使用する

var deferred = $.get("/path/to/file.html");

deferred.done(function(data) {
  // 読み込まれたHTMLを要素としてラップ
  var $html = $(data);

  // セレクターを使用して要素を取得
  var $title = $html.find("h1");

  // タイトルを出力
  console.log($title.text());
});

$.parseHTML()を使用する

var $html = $.parseHTML(data);

// セレクターを使用して要素を取得
var $title = $html.find("h1");

// タイトルを出力
console.log($title.text());

注意点

読み込まれたHTMLが別のJavaScriptファイルを参照している場合、そのファイルも読み込む必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>本文</p>
</body>
</html>

$(document).ready(function() {
  $.ajax({
    url: "sample.html",
    success: function(data) {
      // 読み込まれたHTMLを要素としてラップ
      var $html = $(data);

      // セレクターを使用して要素を取得
      var $title = $html.find("h1");

      // タイトルを出力
      console.log($title.text());
    }
  });
});

このコードを実行すると、コンソールに「タイトル」と出力されます。

$(document).ready(function() {
  $("#target").load("sample.html", function() {
    // セレクターを使用して要素を取得
    var $title = $(this).find("h1");

    // タイトルを出力
    console.log($title.text());
  });
});

$(document).ready(function() {
  var deferred = $.get("sample.html");

  deferred.done(function(data) {
    // 読み込まれたHTMLを要素としてラップ
    var $html = $(data);

    // セレクターを使用して要素を取得
    var $title = $html.find("h1");

    // タイトルを出力
    console.log($title.text());
  });
});

$(document).ready(function() {
  var data = $.get("sample.html");

  // 読み込まれたHTMLを要素としてラップ
  var $html = $.parseHTML(data);

  // セレクターを使用して要素を取得
  var $title = $html.find("h1");

  // タイトルを出力
  console.log($title.text());
});

これらのサンプルコードを参考に、ご自身の用途に合わせてコードを

jQueryセレクターをAJAXで読み込んだHTMLに適用する他の方法

$.fn.extend()を使用する

$.fn.extend({
  ajaxLoad: function(url, callback) {
    var $this = $(this);

    $.ajax({
      url: url,
      success: function(data) {
        // 読み込まれたHTMLを要素としてラップ
        var $html = $(data);

        // セレクターを使用して要素を取得
        var $elements = $html.find($this.selector);

        // 要素を挿入
        $this.append($elements);

        // コールバックを実行
        if (callback) {
          callback.call($this, $elements);
        }
      }
    });
  }
});

$("#target").ajaxLoad("/path/to/file.html", function() {
  // 読み込み完了後の処理
});

カスタムイベントを使用する

$(document).on("ajaxLoad", function(event, $elements) {
  // 読み込み完了後の処理
});

$("#target").load("/path/to/file.html", function() {
  // カスタムイベントを発生させる
  $(document).trigger("ajaxLoad", [$(this)]);
});