Получить согласованный класс в Jquery

Question

В моем HTML есть следующий div:

<div id = "foo" class = "bar barbar foobar"></div>

, и я использую этот код для выбора div:

$('.foo, .barfoo')

Можно ли получить только соответствующий класс выбранного класса? Например, если у меня в классе HTML есть класс barfoo, он вернет класс barfoo или класс foo, если у него будет класс foo.

Answer 1

Разделите селектор по запятым и .find, какой .matches элемент, по которому вы перебираете:

const selector = '.foo, .barfoo';
const selectors = selector.split(', ');
$(selector).each(function() {
  console.log(
    selectors.find(sel => this.matches(sel))
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "foo" class = "bar barbar barfoo"></div>
<div class = "foo"></div>

Если вы хотите удалить деталь ., .slice выключите ее:

const selector = '.foo, .barfoo';
const selectors = selector.split(', ');
$(selector).each(function() {
  console.log(
    selectors.find(sel => this.matches(sel)).slice(1)
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "foo" class = "bar barbar barfoo"></div>
<div class = "foo"></div>