1  <div class="mnr-c xpd O9g5cc uUPGi">
2   <div>
3    <div class="mnr-c xpd O9g5cc uUPGi">someting</div>
4   </div>
5   <div>
6    <div class="mnr-c xpd O9g5cc uUPGi">someting</div>
7   </div>
8  </div>
9  <div class="mnr-c xpd O9g5cc uUPGi">someting</div>
10

У меня есть структура HTML, как указано выше. Я просто хочу выбрать дочерние элементы с помощью селекторов CSS, но у родителей и детей одни и те же классы. Если я попытаюсь выбрать с помощью jquery, например $$(".mnr-c.xpd.O9g5cc.uUPGi").forEach(el => console.log(el)), этот метод покажет 4 результата, но я просто хочу увидеть 3 результата. Строки 1,9 и 11 находятся на одном уровне. Моя цель просто взять строки 3, 6 и 9. Как я могу предотвратить выбор родительского элемента. Возможно ли что-то подобное, просто используя CSS или jquery?

0
omrsfylmz 16 Сен 2021 в 17:04

3 ответа

Лучший ответ

В CSS нет возможности проверять содержимое (на основе этот ответ)

С помощью jquery вы можете выбрать дочерние элементы, затем получить их родителей и исключить этих родителей:

var parents = $(".xpd .xpd").parents(".xpd")
var selection = $(".xpd").not(parents)

Обратите внимание, что это должно быть .xpd .xpd, а не .xpd > .xpd, поскольку между двумя уровнями есть div, поэтому они не являются "дочерними"

Предоставление :

var sel = $(".xpd").not($(".xpd .xpd").parents(".xpd"))
console.log(sel.length)
sel.each((i,e) => console.log(e))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mnr-c xpd O9g5cc uUPGi">
  <div>
   <div class="mnr-c xpd O9g5cc uUPGi">something 1</div>
  </div>
  <div>
   <div class="mnr-c xpd O9g5cc uUPGi">something 2</div>
  </div>
 </div>
 <div class="mnr-c xpd O9g5cc uUPGi">something 3</div>
0
freedomn-m 16 Сен 2021 в 15:38

Если вам нужны только дети, вы можете выбрать их с помощью дочернего селектора < / a> >, вот так $(".mnr-c.xpd.O9g5cc.uUPGi > .mnr-c.xpd.O9g5cc.uUPGi").

Если вы хотите, чтобы все потомки элемента имели один и тот же класс, вы можете использовать комбинатор потомков (пустое место), например $(".mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi").

0
isherwood 16 Сен 2021 в 14:18

Используйте комбинатор потомков:

$(".mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi").forEach(el => console.log(el));
.mnr-c.xpd.O9g5cc.uUPGi .mnr-c.xpd.O9g5cc.uUPGi {
    border: 2px dotted red;
}

Комбинатор потомков | MDN

-1
Richard Deeming 16 Сен 2021 в 14:10