JQuery - изменение атра на основе элемента innerHTML

Я пытаюсь добавить схемы разметки продуктов через наш сайт, но я хочу атр элемента сНа меняться в зависимости от того, что текст для innerHTMLJQuery - изменение атра на основе элемента 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"); 
};

источник

2016-08-10 BearDawg12

'find' является функцией JQuery,' document' является DOM-элемент, не является объектом JQuery. Попробуйте 'avail = $ (" div.badgeIds ")' – Barmar

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>

источник

2016-08-10 17:25:13 Kld

Спасибо! Это именно то, что мне нужно. Другие предложения были замечательными, но из-за странной причуды нашего двигателя (не уверен, что реальный движок, или если это db), я, по сути, должен написать JS, используя методы JQuery, такие как .attr() и т. Д. , этот пример позволил мне форматировать так, чтобы движок мог вытащить его из db и применить его к коду. – BearDawg12

Почему просто не

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

И как @Barmer прокомментировал

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

источник

2016-08-10 17:21:12 baao

Не нужно использовать '.trim()', если вы удаляете все пробелы с помощью '.replace()'. – Barmar

Yap. Спасибо @Barmar – baao

Если есть более чем один элемент DOM Wi th этого класса, вам нужно использовать цикл. Вы можете использовать .each() для циклического перемещения по всем элементам или использовать тот факт, что .attr() может быть задан как аргумент значения, и он будет автоматически зацикливаться. Вызывается функция с номером this, равным элементу DOM, а его возвращаемое значение используется как новый атрибут.

BTW, вы не должны составлять свои собственные атрибуты. Если вам нужны атрибуты приложения, используйте стандартные атрибуты data-XXX. Итак, вместо itemprop, это должно быть data-itemprop. И в jQuery вы можете использовать .data() для этого (и он будет автоматически петли таким же образом).

Вы не можете использовать document.find(selector). Он должен быть $(document).find(selector), потому что find() - это метод jQuery, а не метод DOM. Но это более просто написано, как только $(selector)

источник

2016-08-10 17:27:51 Barmar

Попробуйте $("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>

источник

2016-08-10 17:36:42 Karups

JQuery - изменение атра на основе элемента innerHTML

ответ

Смежные вопросы