使用 jQuery 在 CSS 中实现父选择器，自动应用于 DOM 中的新元素

Question

CSS 不支持父选择器，例如"select all <p> that contain an <img>".

here提出的一种解决方案是使用jQuery，例如：

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

但是，我有一个 <div> 会定期更新新内容，我需要继续将 my-special-class 重新应用到与选择器 '#parent:has(#child)' 匹配的新元素 '#parent:has(#child)' =16=].

怎么做到的？

我正在设计第三方插件的样式，因此我无法对其样式、事件等进行太多控制。

Answer 1

一种解决方案是在容器 div 上绑定 DOMSubtreeModified 事件并在其中添加您的代码。

$('.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>

Answer 2

如果您添加以下 jquery 和一个 class，它将像 :visited:

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

并且只需将 class 添加到 css:

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

如果您将此代码添加到您当前的代码中，您将获得与 :visited 相同的功能。

这是我在您的代码上试过的 fiddle：

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

使用 jQuery 在 CSS 中实现父选择器，自动应用于 DOM 中的新元素

Implementing a parent selector in CSS with jQuery that applies automatically to new elements in DOM

html

javascript

css

jquery

parent