Question

我的滑块内有以下代码。它适用于CMS，因此我需要使用javascript来到达幻灯片中的第一个和第二个p。所以我可以添加类：mx-auto和text-truncate到那些p。但是我无法获得将这些类插入p的代码。

只是为了清楚说明为什么我不能手动添加类。 CMS以编程方式添加P，因此无法更改。

我使用bootstrap 4.0作为我的滑块。

<div class="carousel-item">

  <img class="d-block w-100" src="/Nieuwbouw/upload/images/banner1_1.png" alt="House 1">
  <div class="carousel-caption mx-auto d-none d-md-block">
    <h3 class="mx-auto">This is the title</h3>
    <span class="caption-text1">
      <p>This is the subtitel <-- TARGET THIS --></p>

    </span>
    <span class="caption-text2">
      <p>This is all text! <-- AND THIS --></p>

    </span>
    <h3 class="mx-auto">From €256.000,-</h3>
    <a href="#">+ see more</a>
  </div>
</div>

我尝试了以下代码的许多变量但没有任何工作（没有插入类）

var targetElement1 = document.getElementsByClassName(".caption-text1").getElementsByTagName("p")[0];
targetElement1.classList.add('mx-auto', 'text-truncate');

Answer 1

使用querySelectorAll：

尝试以下方式

var pElement = document.querySelectorAll('.carousel-item span > p');
pElement.forEach(function(p){
	p.setAttribute('class','mx-auto text-truncate');
	console.log(p);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-item">

  <img class="d-block w-100" src="/Nieuwbouw/upload/images/banner1_1.png" alt="House 1">
  <div class="carousel-caption mx-auto d-none d-md-block">
    <h3 class="mx-auto">This is the title</h3>
    <span class="caption-text1">
      <p>This is the subtitel <-- TARGET THIS --></p>

    </span>
    <span class="caption-text2">
      <p>This is all text! <-- AND THIS --></p>

    </span>
    <h3 class="mx-auto">From €256.000,-</h3>
    <a href="#">+ see more</a>
  </div>
</div>

Answer 2

不确定我是否遗漏了某些内容 - 但你绝对可以使用document.querySelectorAll定位这些元素（但也有其他方法可以获取它们） - 我添加了你想要的两个类 - 还有一个＆＃34;红色＆＃34;用于演示元素已受影响的类，现在将显示为红色。

＆＃13;

var elements = document.querySelectorAll('.carousel-item span p');

for(i=0;i<elements.length;i++){ 
  elements[i].classList.add('mx-auto','text-truncate','red');
  }

＆＃13;

.red {color:red}

＆＃13;

<div class="carousel-item">

  <img class="d-block w-100" src="/Nieuwbouw/upload/images/banner1_1.png" alt="House 1">
  <div class="carousel-caption mx-auto d-none d-md-block">
    <h3 class="mx-auto">This is the title</h3>
    <span class="caption-text1">
      <p>This is the subtitel</p>

    </span>
    <span class="caption-text2">
      <p>This is all text!</p>

    </span>
    <h3 class="mx-auto">From €256.000,-</h3>
    <a href="#">+ see more</a>
  </div>
</div>

＆＃13;

使用Javascript .getElement在类中定位P.

2 个答案: