Реализация родительского селектора в CSS с помощью jQuery, который автоматически применяется к новым элементам в DOM - PullRequest
Новая
       13

Реализация родительского селектора в CSS с помощью jQuery, который автоматически применяется к новым элементам в DOM

0 голосов
/ 25 мая 2018

CSS не поддерживает родительские селекторы, например, «выбрать все <p>, которые содержат <img>».

Одно из предложенных решений здесь заключается в использовании jQuery, например:

$('#parent:has(#child)').addClass('my-special-class');

Однако у меня есть <div>, который периодически обновляется с новым контентом, и мне нужно продолжать применять my-special-class к новым элементам, которые соответствуют селектору '#parent:has(#child)'внутри этого <div>.

Как можно это сделать?

Я разрабатываю сторонний плагин, поэтому у меня нет большого контроля над его стилем, событиями и т. Д.

Ответы [ 2 ]

0 голосов
/ 25 мая 2018

Если вы добавите следующий jquery и только один класс, он будет работать как :visited: 

$("div.my-div").click(function(){
    $(this).addClass("visited");
});

И просто добавьте один класс в css: 

.visited:hover{
  outline: 2px solid orange;
}

Еслиесли вы добавите этот код к вашему текущему коду, вы получите ту же функциональность, что и для :visited.

Вот скрипка, которую я попробовал для вашего кода:

https://jsfiddle.net/thisisdg/27srmuy6/

0 голосов
/ 25 мая 2018

Одним из решений является привязка события 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>
...