css 如何在jQuery动态创建的元素上添加::before伪元素

ut6juiuv  于 2023-01-22  发布在  jQuery
关注(0)|答案(5)|浏览(261)

我用jquery动态地创建了一些元素(比如id为test_element1test_element2等等)。
我有以下CSS -

div[id^=test_]:before  {
    content: "";
    height: 100%;
    width: 100%;
    box-shadow: #aaaaaa 0px 0px 10px inset;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

当我检查::before元素时,它没有显示出来,只有当test_element1已经存在于HTML中(即静态内容)时,它才会显示出来。
如何使::before显示在动态元素中?

kkbh8khc

kkbh8khc1#

pseudo元素没有出现是没有理由的。也许你可以检查一下你的代码,看看是否有其他地方的问题。这里有一个你正在尝试实现的工作示例,也许你可以将其与你的代码进行比较,并找到一个适合你具体情况的解决方案。但最终的答案是它应该工作,所以问题不在于css/jquery关系。

$("body").append(

  $("<div />", {
    "id": "test_element1"
  }).html("test"),

  $("<div />", {
    "id": "test_element2"
  }).html("test"),

  $("<div />", {
    "id": "test_element3"
  }).html("test")

);
div[id^=test_] {
  position: relative;
  padding-top: 1em;
}

div[id^=test_]::before {
  content: "i am pseudo element";
  height: 100%;
  width: 100%;
  box-shadow: #aaaaaa 0px 0px 10px inset;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2izufjch

2izufjch2#

div[id^=test_] {
    position: relative;
}
div[id^=test_]:before  {
    content: "";
    height: 100%;
    width: 100%;
    box-shadow: #aaaaaa 0px 0px 10px inset;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

这将是你问题的答案。

ahy6op9u

ahy6op9u3#

var count = 0;
var interval = setInterval(function(){
    if(count < 5){
      let btn = document.createElement('button');
      let len = document.querySelectorAll('button').length;
      btn.classList.add('text_'+ parseInt(len + 1));
      btn.innerText = 'Button ' + parseInt(len + 1);
      document.body.appendChild(btn);
      count+=1;
    }else{
      clearInterval(interval)
    }
 }, 5000)
button{
  position:relative;
  display:block;
  padding:10px;
  background: dodgerblue;
  color:#fff;
  margin-bottom:10px;
  border: none;
  border-radius:5px;
}
button[class^="text_"]:before{
  content: 'Before';
  position:absolute;
  left: 100%;
  height:30px;
  padding: 0 10px;
  border-radius: 50%;
  color: #000;
}
<button class="text_1">Button 1</button>

请检查此代码片段,并相应地修复您的代码。这里我生成动态按钮与动态id。我还指定了css属性使用伪属性选择器。
编辑你的代码,让我知道你的想法。我希望这将解决你的问题。

kt06eoxx

kt06eoxx4#

答案是
你不能使用javascript或jquery来操作伪元素:after和:before,甚至不能动态地添加它们。

deyfvvtc

deyfvvtc5#

设置伪元素时,需要添加选择器z索引+位置。

div[id^=test_]  {
    position:relative;
    z-index:1;
}
div[id^=test_]:before  {
    content: "";
    height: 100%;
    width: 100%;
    box-shadow: #aaaaaa 0px 0px 10px inset;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

相关问题