Javascript选择嵌套类元素

Question

我正在更改我网站上的滑块元素

我的滑块代码如下所示：

<div class="cl1">
    <h1>Some heading</h1>
    <div class="sl_descr">Some description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

<div class="cl2">
    <h1>Some other heading</h1>
    <div class="sl_descr">Some other description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

<div class="cl3">
    <h1>yet some heading</h1>
    <div class="sl_descr">yet Some description</div>
    <div class="sl_price">from only €00.00<br></div>
</div>

我想在货币变化时改变价格。 为此，我想将 javascript 与 getElementsByClassName 和innerHTML 一起使用。 但是我的 javascript 不能正常工作。 这里是

document.getElementsByClassName('cl1 sl_price').innerHTML="from only £00.00<br>";

关于如何为每个“cl”元素单独处理“sl_price”类的任何建议？ 干杯

Answer 1

getElementsByClassName返回元素的集合（列表）（因此不会有innerHTML属性）

您可以尝试document.querySelector(".cl1 .sl_price")代替（采用 css 选择器并返回第一个匹配项）

在https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector阅读更多

最终结果将是这样的；

document.querySelector('.cl1 .sl_price').innerHTML = "from only £00.00<br>";

---

注意：我假设您只想匹配单个元素。 如果没有，您应该查看@Bommox 的回答和querySelectorAll 。

Answer 2

document.querySelectorAll('.cl1 .sl_price');

这将选择 cl1 中的所有嵌套 sl_price 元素。 如果您希望修改更多 cl（即 cl1、cl2、cl3），只需向所有这些类添加一个公共类，例如 cl。

Answer 3

你应该这样做（如果不使用 jQuery）：

我使用了“for”，因为如果它可能不止一个 cl1 或 sl_price 在它们之中，我不知道。

var nodes = document.getElementsByClassName("cl1");
for(var i = 0; i < nodes.length; i++) {
     var node = nodes[i].getElementsByClassName("sl_price");
     for(var j = 0; j < node.length; i++) {
          node.innerHTML="from only £00.00<br>";
     }
}

Answer 4

如果您使用 Jquery，则代码比原生 Javascript 短。

$('.cl1 .sl_price').html("from only £00.00<br>");

这是小提琴：

http://jsfiddle.net/4zLbmrLq/

Answer 5

编辑：这是错误的，因为它没有考虑给出两个类名。

我建议使用 JQuery 来做这样的事情，当你尝试做一些更复杂的事情时，这会让事情变得更容易。 然而，这里的实际问题是getElementsByClassName返回一个HTMLCollection元素，并且在其上设置innerHTML并没有在其元素上设置它。 以下代码应该可以工作：

var elements = document.getElementsByClassName('cl1 sl_price');
for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = "from only £00.00<br>";
}

Answer 6

我相信你需要做的是这样的：

document.getElementsByClassName('cl1').getElementsByClassName('sl_price')[0].innerHTML="from only £00.00<br>";

您现在的做法将获得同时具有类 cl1 和 sl_price 的元素。 如果你链接你的方法，你会告诉它在文档对象中查找 cl1 作为类的元素，返回一个带有该子集的对象，然后在该子集中查找带有 sl_price 类的元素。 然后您必须指定一个索引，因为 document.getElementsByClassName 将返回一个符合您要求的元素数组。 该数组不会有属性 array.innerHTML，但包含在其索引中的对象会有。