如何根据 div 和 jquery javascript 中的文本查找相应数据属性的值

Question

我有一些 div 具有名称和不同的数据属性值 data-category

现在我需要 data-category 的值基于 div 中的特定文本。


<div class='ext-category' data-category="swimpool">Jack</div>
<div class='ext-category' data-category="swimpool">John</div>
<div class='ext-category' data-category="office">Jennifer</div>
<div class='ext-category' data-category="office">Sue</div>

在 js 函数中，我可以在 div:

中获取名称

eventReceive: function(info) {
    var name = info.event['name']; // shows me "Jennifer"

}

如何获取属于 Jennifer 的 data-category 的值？

我试过了：

var category = $(".ext-category").find(name).attr('data-category');
alert(category); // result: undefined (should be office)

Answer 1

您可以使用 querySelectorAll 遍历数据然后检查哪个元素具有正确的名称，return 它的数据类别值就像这样

function findByName(name) {
  const elements = document.querySelectorAll(".ext-category");
  for (let i = 0; i < elements.length; i++) {
    if (elements[i].innerText == name) return elements[i].dataset.category; // Credits to vanowm for suggesting .dataset.category rather than .getAttribute
  }
}

console.log(findByName("Jack"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='ext-category' data-category="swimpool">Jack</div>
<div class='ext-category' data-category="swimpool">John</div>
<div class='ext-category' data-category="office">Jennifer</div>
<div class='ext-category' data-category="office">Sue</div>

Answer 2

这是使用 :contains()

的一种快速简便的方法

const getCategoryFromName = (name) => $(`.ext-category:contains(${name})`).data('category')
console.log(getCategoryFromName('Jennifer'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='ext-category' data-category="swimpool">Jack</div>
<div class='ext-category' data-category="swimpool">John</div>
<div class='ext-category' data-category="office">Jennifer</div>
<div class='ext-category' data-category="office">Sue</div>

Answer 3

使用 contains 选择器：

var category = $(".ext-category:contains('Jennifer')").attr('data-category');
alert(category);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='ext-category' data-category="swimpool">Jack</div>
<div class='ext-category' data-category="swimpool">John</div>
<div class='ext-category' data-category="office">Jennifer</div>
<div class='ext-category' data-category="office">Sue</div>

如何根据 div 和 jquery javascript 中的文本查找相应数据属性的值

how to find value of corrsponding data attr based on text inside div with jquery javascript

javascript

jquery

attr