给最后一个子元素加类的JS方法

大家好，我们又见面了啊~本文《JavaScript给最后一个子元素加类方法》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

本文详细介绍了如何在JavaScript中，当从下拉菜单动态生成并分割内容到多个`div`元素后，精准地为这些`div`中的最后一个元素添加特定的CSS类。通过利用`querySelector`方法结合CSS伪类`:last-child`，可以高效地定位并操作目标元素，从而为后续的样式应用或数据处理（如价格计算）奠定基础，提升页面交互性和数据处理的灵活性。

在现代Web开发中，我们经常需要根据用户的选择动态地生成和更新页面内容。一个常见的场景是，用户从下拉菜单中选择一个选项，该选项的复合值（例如包含名称、尺寸和价格）被解析并显示为一系列独立的HTML元素。为了实现更精细的控制，例如对其中的价格部分进行特殊样式处理或进行JavaScript计算，我们需要一种机制来准确地识别并操作这些动态生成的元素中的特定部分，特别是最后一个元素。

场景描述

假设我们有一个下拉菜单，其选项的值以特定分隔符（如|）连接了多个信息字段。当用户选择一个选项时，JavaScript函数会将这个值分割，并将每个字段包裹在一个div中，然后插入到页面上的指定容器内。例如，"Namiddag|13x19 cm|€12,50" 会被转换为：

<div>Namiddag</div>
<div>13x19 cm</div>
<div>€12,50</div>

我们的目标是，为包含价格信息的最后一个div（即

解决方案：利用 querySelector 和 :last-child

解决这个问题的关键在于，在内容被插入到DOM之后，如何高效地选取其内部的最后一个子div元素。JavaScript的querySelector方法结合CSS的:last-child伪类，提供了一个简洁而强大的解决方案。

querySelector方法返回文档中与指定选择器组匹配的第一个元素。当与:last-child伪类结合使用时，它能够精确地定位到父元素下的最后一个特定类型的子元素。

示例代码

首先，我们来看HTML结构，它包含两个下拉菜单和两个用于显示选择结果的容器：

<select id="Namiddag" name="Namiddag" data-name="Namiddag" class="js-basic-single" onChange="selectedAfternoon(this);">
  <option></option>
  <option id="13x19namiddag" value="Namiddag|13x19 cm|€12,50">13x19 cm, €12.50</option>
  <option id="20x30namiddag" value="Namiddag|20x30 cm|€22,50">20x30 cm, €22.50</option>
  <option id="30x45namiddag" value="Namiddag|30x45 cm|€32,50">30x45 cm, €32.50</option>
  <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
&lt;/select&gt;

&lt;select id=&quot;Onderweg&quot; name=&quot;Onderweg&quot; data-name=&quot;Onderweg&quot; class=&quot;js-basic-single&quot; onChange=&quot;selectedCommute(this);&quot;&gt;
  <option></option>
  <option id="13x19onderweg" value="Onderweg|13x19 cm|€12,50">13x19 cm, €12.50</option>
  <option id="20x30onderweg" value="Onderweg|20x30 cm|€22,50">20x30 cm, €22.50</option>
  <option id="30x45onderweg" value="Onderweg|30x45 cm|€32,50">30x45 cm, €32.50</option>
  <option class="disabled" value="disabled" disabled="disabled">Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen., &nbsp;</option>
&lt;/select&gt;

<div id="output-selections">
  <div class="selected-option" id="output-selected-option-afternoon"></div>
  <div class="selected-option" id="output-selected-option-commute"></div>
</div>

接下来是修改后的JavaScript函数，它在填充内容后，会立即为最后一个div添加price类：

function selectedAfternoon(element) {
    var text = element.options[element.selectedIndex].value;
    var outputContainer = document.getElementById("output-selected-option-afternoon");
    // 1. 生成并插入HTML内容
    outputContainer.innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";
    // 2. 选取最后一个子div并添加class
    outputContainer.querySelector("div:last-child").classList.add("price");
}

function selectedCommute(element) {
    var text = element.options[element.selectedIndex].value;
    var outputContainer = document.getElementById("output-selected-option-commute");
    // 1. 生成并插入HTML内容
    outputContainer.innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";
    // 2. 选取最后一个子div并添加class
    outputContainer.querySelector("div:last-child").classList.add("price");
}

最后，我们可以定义price类的CSS样式：

.js-basic-single {
  width: 100%;
}

.selected-option {
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* 为价格元素定义样式 */
.price {
  color: red; /* 例如，将价格显示为红色 */
  font-weight: bold; /* 加粗 */
}

代码解析

1. 获取选中的值并分割：

   var text = element.options[element.selectedIndex].value;

   这行代码获取了下拉菜单中当前选中选项的value属性值。

2. 生成HTML并插入：

   outputContainer.innerHTML = "<div>" + text.split("|").join("</div><div>") + "</div>";

   text.split("|")将字符串按|分割成一个数组。 join("