jQuery - ajaxリクエストから要素のクラスを取得する方法

mainタグ内のコンテンツを置き換えて、Webサイトのページをajaxでロードしています。問題は、Wordpressを使って、各ページに独自のbodyクラスがあり、スタイリングのために便利なので、古いページのボディクラスを次のページのクラスに置き換えたいと思います。

新しいAjaxリクエストを実行してHTMLページ全体を取得してから、body要素をチェックしてから、.attr("class")を使用してクラスのリストを取得し、最後に新しいボディクラスを置き換えます。

しかし、クラスは常にクラスリストの代わりにundefinedを返します。

EDIT：私は体の代わりに.cd-main-contentを使用しようとしましたが、奇妙なことに、この要素のクラスを取得します。だから私は今問題は私の構文から来るのではなく、要素自体から来ると仮定します。
body要素ではどうすれば動作させることができますか？（私はすでに.filterで.findを交換しようとしたが、それはどちらか動作しません）jQuery - ajaxリクエストから要素のクラスを取得する方法

HTMLのstucture

<body id="body" class="home page-id-number other-classes"> 
    <main> 
     <div class="cd-main-content"> 
      <!-- inside is the dynamically loaded content--> 
     </div> 
    </main> 
</body>

jQueryの

$.ajax({url: url, 
    success: function(data){ 
     var body = $(data).find("#body"); 
     var classes = body.attr("class"); 
     console.log(data); //returns the html as expected 
     console.log("body : "+body); //returns [object Object] 
     console.log("classes : "+classes); //returns undefined 
    } 
});

出典

2017-07-06 Marine Le Borgne

文字列から取得するときにjQueryによるフィルタリング "ボディ" タグ。

だから、$（データ）[0]は本文なしですべてのコンテンツを返すでしょう。

まただから、あなたがそのようなクラスを取得することができ、ない「見つける」フィルタを使用します。

$.ajax({url: url, 
    success: function(data){ 
     //replace body tag 
     data = data.replace("<body", "<container").replace("body>", "container>"); 
     var classes = $(data).filter("container").attr("class"); 
     $("body").attr("class", classes); 
    } 
});

出典

2017-07-06 16:05:50

ああ、ボディータグを置き換えるのは良い考えです。実際に私のソリューションを好むのは、htmlを変更する必要がないからです。ありがとうございました！ –

あなたのjQueryのコードが間違っている：

$.ajax({url: url, 
    success: function(data){ 
     var body = $(data).find("body"); //not #body 
     var classes = body.attr("class"); 
     console.log(data); //returns the html as expected 
     console.log("body : "+body); //returns [object Object] 
     console.log("classes : "+classes); //returns undefined 
    } 
});

右のセレクタは、あなたの体のクラスはこのコードを使用変更するには、だから、IDセレクタ

である、body#bodyではありません。

$.ajax({url: url, 
    success: function(data){ 
     var classes = $(data).find("body").attr("class"); //get the classes 
     $("body").attr("class", classes); //set the classes 
    } 
});

jQuery Selectors

出典

2017-07-06 14:12:41

申し訳ありませんが、私は混乱を避けるために、自分のコードを編集しました。私の体は身体のIDを持っているので、これは問題の原因ではありません。クラスを設定するヒントをありがとう！ –

私はそれが理想的ではないですが、解決策を見つけました問題を修正しました。

まず、jQueryでフィルタリングされているように見えるbody要素の属性を取得することはできないと仮定しなければなりません。ただし、子要素を取得することは可能です。

bodyとmainの両方の要素（wordpressのheader.phpファイル）にボディクラスを追加しました。

ここで今私のコードです：

HTML

<body id="body" class="home page-id-number other-classes"> 
    <main class="home page-id-number other-classes"> 
    <!-- if I had the possibility, I'd have added "data-body-class" instead of "class" --> 
     <div class="cd-main-content"> 
      <!-- inside is the dynamically loaded content--> 
     </div> 
    </main> 
</body>

jQueryの

$.ajax({url: url, 
    success: function(data){ 
     var classes = $(data).filter("main").attr("class"); //get the classes 
     $("body, main").attr("class", classes); //set the classes 
    } 
});

出典

2017-07-06 15:49:52

jQuery - ajaxリクエストから要素のクラスを取得する方法

答えて

関連する問題