Реализация родительского селектора в CSS с помощью jQuery, который автоматически применяется к новым элементам в DOM
CSS не поддерживает родительские селекторы, например «выбрать все <p>, содержащие <img>».
Одним из предлагаемых решений здесь является использование jQuery, например:
$('#parent:has(#child)').addClass('my-special-class');
Однако у меня есть <div>, который периодически обновляется новым контентом, и мне нужно повторно применять my-special-class к новым элементам, которые соответствуют селектору '#parent:has(#child)' внутри этого <div>.
Как можно было это сделать?
Я разрабатываю сторонний плагин, поэтому у меня нет особого контроля над его стилем, событиями и т. д.
Это не проблема с родительским селектором, а из-за того, что выбор jQuery не работает в целом. То есть вы столкнетесь с этой проблемой независимо от того, какой селектор вы используете.
@JohuderGonzalez Я не понимаю, как это можно сделать. Допустим, у вас есть два элемента <p>: div > p > img и div > p > span. Как вы стилизуете первый p, но не второй p?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Одно из решений - привязать событие DOMSubtreeModified к контейнеру div и добавить внутрь свой код.
$('.container').on("DOMSubtreeModified",function(){
$('.parent:has(.child)').addClass('special-child');
});
// find elements
var parent = $("#parent")
var button = $("button")
// handle click and add class
button.on("click", function() {
const el = '<div class = "parent"><p class = "child">Hello World</p></div>';
parent.after(el);
})
$(function() {
$('.parent:has(.child)').addClass('special-child');
$('.continer').on("DOMSubtreeModified", function() {
$('.parent:has(.child)').addClass('special-child');
});
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.child {
background: #fff;
border-radius: 4px;
padding: 10px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 4px auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.special-child {
color: red;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class = "continer">
<div class = "parent" id = "parent">
<p class = "child">Hello World</p>
</div>
</div>
<button>Add Child</button>DOMSubtreeModified устарел в пользу API-интерфейса Mutation Observer. developer.mozilla.org/en-US/docs/Web/Events/DOMSubtreeModifi edИспользование DOMSubtreeModified приводит к бесконечному циклу в Internet Explorer после второго вызова. Другие браузеры работают нормально.
Если вы добавите следующий jquery и только один класс, он будет работать как :visited:
$("div.my-div").click(function(){
$(this).addClass("visited");
});
И просто добавьте в css один класс:
.visited:hover{
outline: 2px solid orange;
}
Если вы добавите этот код к своему текущему, вы получите те же функции, что и для :visited.
Вот рабочий пример, которую я пробовал на вашем коде:
Почему бы не использовать класс css для родительского элемента, у которого есть прямые дочерние элементы, к вашему желаемому родителю, содержащему img? Я имею в виду .wrapper> .parentIMG