jQueryの - innerHTMLの

Question

は、私たちのサイト全体の製品にスキーママークアップを追加しようとしているが、私はdiv要素のattrはテキストはinnerHTMLプロパティ

HTML何のためにあるのかに基づいて変更したい要素に基づいてattrの変更：

<div class="badgeIds" itemtype="https://schema.org/ItemAvailability" itemprop="availability"> 
    Online Only 
</div> 

ここに私がJavascriptで書いたものがあります。私の論理に欠陥がありますか？

var avail = document.find("div.badgeIds"); 

if (avail.html().trim() == "Preorder") { 
     avail.attr("itemprop", "availability:Preorder"); 
} elseif (avail.html().trim() == "Online Only") { 
     avail.attr("itemprop", "availability:OnlineOnly"); 
} elseif (avail.html().trim() == "Available In Store Only") { 
     avail.attr("itemprop", "availability:InStoreOnly"); 
}; 

Answer 1

var avail = $("div.badgeIds"); 
 
var txt = $("div.badgeIds").text().trim(); 
 

 
    
 

 
if (txt == "Preorder") { 
 
     avail.attr("itemprop", "availability:Preorder"); 
 
} else if (txt == "Online Only") { 
 
     avail.attr("itemprop", "availability:OnlineOnly"); 
 
} else if (txt == "Available In Store Only") { 
 
     avail.attr("itemprop", "availability:InStoreOnly"); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 

 
<div class="badgeIds" itemtype="https://schema.org/ItemAvailability" itemprop="availability"> 
 
    Online Only 
 
</div>

Answer 2

なぜだけではなく、

avail.attr("itemprop", "availability:" + avail.html().replace(/\s|Available/g, ""); 

し、複数のDOM要素のwiがある場合@Barmerが

var avail = $("div.badgeIds"); 

Answer 3

をコメントしているとして、このクラスでは、ループを使用する必要があります。 .each()を使用すると、すべての要素をループしたり、.attr()にvalue引数として関数を与えることができ、自動的にループします。この関数はDOM要素と等しいthisで呼び出され、その戻り値が新しい属性として使用されます。

ところで、このような独自の属性を設定しないでください。アプリケーション固有の属性が必要な場合は、標準のdata-XXX属性を使用してください。したがって、itempropの代わりに、data-itempropにする必要があります。 jQueryでは、これに.data()を使用することができます（同じ方法で自動的にループします）。

document.find(selector)は使用できません。 find()はjQueryメソッドであり、DOMメソッドではないため、$(document).find(selector)である必要があります。しかし、それはより簡単にちょうど$(selector)

Answer 4

私のポイントとして$("div.badgeId");

一部コードの改善を試してみてくださいと書かれています。

var avail = $("#badgeId"); 
 
var text = avail.html().trim(); 
 
if (text == "Preorder") { 
 
     avail.attr("itemprop", "availability:Preorder"); 
 
} else if (text == "Online Only") { 
 
     avail.attr("itemprop", "availability:OnlineOnly"); 
 
} else if (text == "Available In Store Only") { 
 
     avail.attr("itemprop", "availability:InStoreOnly"); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="badgeId" class="badgeIds" data-itemtype="https://schema.org/ItemAvailability" data-itemprop="availability"> 
 
    Online Only 
 
</div>