В jQuery Выберите элемент с избыточностью или двумя одинаковыми классами. - PullRequest
Новая
       11

В jQuery Выберите элемент с избыточностью или двумя одинаковыми классами.

3 голосов
/ 03 февраля 2020

Скажите в этом примере: 

<div class='a a'></div>
<div class='a a'></div>
<div class='a'></div>
<div class='a a'></div>
<div class='a a'></div>
<div class='a'></div>
<div class='a a'></div>

В jQuery как выбрать элементы div с двумя классами a?

Я использую daterangepicker библиотека, просто чтобы вы знали, что я не контролирую отображаемые теги, и в отображаемом календаре есть элементы с двумя одинаковыми классами, я хочу их выбрать.

Ответы [ 4 ]

2 голосов
/ 03 февраля 2020

если значение класса всегда равно class="a a", тогда вы можете использовать селектор атрибута, как показано в приведенном ниже коде, с div[class="a a"]

$(function(){
   $('div[class="a a"]').addClass('b');
})
.a {
  color: green;
}
.b {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>

для другого случая, когда class может иметь третий класс в начале / конце / середине, тогда в этом случае нам нужно вручную вычислить классы 

$(function(){
  $('div.a').filter(function(){
     var classVal = $(this).attr('class');
     var classes = classVal.split(" ");
     var count = 0;
     for(var i=0; i<classes.length; i++) {
        if(classes[i] == "a") {
          count++;
        }
     }
     return count==2;
  }).addClass('b');
});
.a {color:  green;}
.b {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>
<div class='a a'>Double A</div>
<div class='a'>Single A</div>
<div class='a a'>Double A</div>
1 голос
/ 03 февраля 2020

Вы должны посчитать вхождения классов, чтобы получить именно такой предмет, как вы sh, как показано ниже. 

$(".a").filter(function(){
  var classes = $(this).attr("class").split(/\s+/);
  var countClassA = classes.filter(c => c === "a").length;
  return countClassA > 1;
}).addClass('selected');
div{
   padding: 5px;
}

.selected{
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a a'>Double AA</div>
<div class='a a'>Double AA</div>
<div class='a'>Single A</div>
<div class='a a'>Double AA</div>
<div class='a a'>Double AA</div>
<div class='a'>Single A</div>
<div class='a b a'>Double AA</div>
0 голосов
/ 03 февраля 2020

Это решит вашу проблему? выберите только div с двойным именем класса: 

$('div').each(function() {
  if ($(this).attr('class') == 'a a') {
    $(this).addClass('active')
  }
});
.active {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a a b'>a a b</div>
<div class='a a'>a a</div>
<div class='a'>a</div>
<div class='a a c'>a a c</div>
<div class='a a d'>a a d</div>
<div class='a'>a</div>
<div class='a a e'>a a e</div>
0 голосов
/ 03 февраля 2020

Вы можете получить атрибут класса и посмотреть, содержит ли он несколько a классов: 

$(".a").on("click", function() {
  const classes = $(this).attr('class');
  const count = classes.split(/\ba\b/).length - 1;
  if (count === 2) {
    console.log('A A !!!');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a a'>A A</div>
<div class='a a'>A A</div>
<div class='a b'>A</div>
<div class='a b a'>A A</div>
<div class='b a a'>A A</div>
<div class='a'>A</div>
<div class='a a'>A A</div>
...