jQuery - 如何從ajax請求獲取元素的類

我使用ajax通過替換main標記中的內容來加載我的網站頁面。問題是，使用Wordpress，每個頁面都有自己的body類，這些類對於樣式目的很有用，所以我想用下一頁的類替換舊頁面的正文類。

我想我會運行一個新的ajax請求來獲取整個html頁面，然後檢查body元素，然後使用.attr("class")獲取類的列表，最後用新的類替換舊的body類。

但類總是返回undefined而不是類的列表。

編輯：我試圖用.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從字符串時獲得。

所以$（data）[0]會返回所有內容，沒有body。

還可以使用過濾器，而不是「發現」所以，你可以得到的類這樣的：

$.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 
    } 
});

正確的選擇是body不#body，這是一個ID選擇

因此，改變你的身體類使用此代碼：

$.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，所以這不是問題的來源。感謝提示設置類！ –

我找到了一個解決方案，它的效果並不理想但它解決了這個問題。

首先，我必須假設它不可能獲得body元素的屬性，因爲它似乎被jQuery過濾。但是可以獲取子元素。

我最後將body 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請求獲取元素的類

回答

相關問題