Question

我正在尝试向我们网站上的产品添加架构标记，但我希望div元素的attr根据innerHTML的文本内容进行更改

HTML：

<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

为什么不

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

正如@Barmer所评论的那样

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

Answer 2

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 3

如果此类有多个DOM元素，则需要使用循环。您可以使用.each()循环遍历所有元素，或者使用.attr()可以赋予函数作为值参数的事实，它将自动循环。调用该函数时this等于DOM元素，其返回值用作新属性。

$("div.badgeIds").attr("itemprop", function() {
    var html = $(this).html().trim();
    switch (html) {
        case "Preorder":
            return "availability:Preorder";
            break;
        case "Online Only":
            return "availability:OnlineOnly";
            break;
        case "Available In Store Only":
            return "availability:InStoreOnly";
            break;
        default:
            return "";
    }
});

顺便说一句，你不应该像这样构成自己的属性。如果您需要特定于应用程序的属性，请使用标准data-XXX属性。因此，itemprop应该是data-itemprop，而不是.data()。在jQuery中，你可以使用document.find(selector)（它将以相同的方式自动循环）。

您无法使用$(document).find(selector)。它必须是find()，因为$(selector)是一个jQuery方法，而不是一个DOM方法。但这更简单地写成#include <stdio.h> #include <string.h> typedef unsigned char uint8; typedef signed char int8; typedef unsigned short int uint16; typedef signed short int int16; typedef struct padded_t { int8 array0[11]; int8 array1[4]; uint16 len2; int8 array2[25]; uint16 len3; int8 array3[6]; // many more len/arrays follow } padded_t; int main(int argc, char** argv) { padded_t foo; memset((void*)&foo, 0, sizeof(padded_t)); int8* str = "foobar"; int16 size = (int16)strlen(str); int8* ptr = (int8*)&foo.len2; // please note that the memcpy references only the pointer to len // are the following couple of lines safe? memcpy ((void*)ptr, &size, 2); memcpy ((void*)&ptr[2], (void*)str, size); printf("%d\n", foo.len2); printf("%s\n", foo.array2); return 0; }

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>

JQuery - 基于元素innerHTML改变attr

4 个答案: