Question

我想在课堂上围绕文字＆＃34; Inside＆＃34; （在课堂内＃34; Iztocnica＆＃34;），带符号＆＃34;＃＆＃34;。如果没有课程＆＃34; Inside＆＃34;在课堂上＃34; Iztocnica＆＃34;，我想添加＆＃34; ##＆＃34;。

例如：

原始

Hello Hello

Ola

嗨嗨

我想要的文字：

您好#Hello＃

Ola ##

你好#Hi＃

HTML

<p class=Iztocnica>
    <span class=SomeClass>Hello</span>
    <span class=Inside>Hello</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Ola</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Hi</span>
    <span class=Inside>Hi</span>
</p>

有没有办法用Javascript做到这一点？我知道如何围绕课堂上的文字＆＃34; Inside＆＃34;，但我不知道如何添加＆＃34; ##＆＃34;如果没有课程＆＃34;内部＆＃34;

var x = document.getElementsByClassName("Inside"); // vsi <p>

for (i = 0; i < x.length; i++) { 
    x[i].innerHTML="#"+x[i].innerHTML+"#";
}

Answer 1

也可以使用CSS：

完成

.Inside:before, .Inside:after { content: "#" }
.Iztocnica :only-child:after { content: " ##" }

<p class=Iztocnica>
    <span class=SomeClass>Hello</span>
    <span class=Inside>Hello</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Ola</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Hi</span>
    <span class=Inside>Hi</span>
</p>

或者在JavaScript中，您可以检查x[i].getElementsByClassName("Inside")是否返回任何元素。

Answer 2

对于非 Inside范围类（例如<span class=SomeClass>Ola</span>），请向noInside添加额外的课程span，然后附加现有innerHTML 1}}使用字符串##。

对于Inside span类，例如（<span class=Inside>Hello</span>），只需在实际#之前添加innerHTML。

＆＃13;

var inside = document.querySelectorAll("span.Inside"); 
Array.prototype.forEach.call(inside, function (item) {
  item.innerHTML = "#" + item.innerHTML + "#";
});

var noInside = document.querySelectorAll(".noInside"); 
Array.prototype.forEach.call(noInside, function (item2) {
  item2.innerHTML+= " ##";
});

＆＃13;

<p class=Iztocnica>
    <span class=SomeClass>Hello</span>
    <span class=Inside>Hello</span>
</p>
<p class=Iztocnica>
    <span class="SomeClass noInside">Ola</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Hi</span>
    <span class=Inside>Hi</span>
</p>

＆＃13;

Answer 3

从Iztocnica类开始，如果每个实例中都不存在，则添加一个Inside

var izt = document.querySelectorAll('.Iztocnica');

izt.forEach(function(el){
  var inside = el.querySelector('.Inside');
  if(!inside){
      inside = document.createElement('span');
      inside.classList.add('Inside')
      el.appendChild(inside)
  }
  inside.innerHTML="#"+inside.innerHTML+"#";
});

<p class=Iztocnica>
    <span class=SomeClass>Hello</span>
    <span class=Inside>Hello</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Ola</span>
</p>
<p class=Iztocnica>
    <span class=SomeClass>Hi</span>
    <span class=Inside>Hi</span>
</p>

在另一个类中选择类

3 个答案: