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

Question

I have some divs with a name and different values of data attr data-category

Now i need the value of data-category based on specific text inside the 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>

In a js function, i can grab the name inside the div:

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

}

How can i grab the value of data-category which belongs to Jennifer?

I tried:

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

Answer 1

Here's a quick and easy way using :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>