JavaScript动态为生成元素的最后一个子div添加CSS类

上述JavaScript代码能够将选中的选项值拆分并填充到output-selected-option-afternoon这个父div中，每个片段都包裹在一个新的div中。例如，选择"Namiddag|13x19 cm|€12,50"后，output-selected-option-afternoon内部会生成：

Namiddag
13x19 cm
€12,50

此时的问题是，我们如何才能精确地选中包含价格信息（即€12,50）的最后一个div，并为其添加一个名为price的CSS类，以便后续的JavaScript逻辑能够轻松地识别并提取价格进行计算？

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

解决此问题的关键在于利用DOM的querySelector方法结合CSS的:last-child伪类选择器。

1. querySelector() 方法:element.querySelector(selectors) 返回元素内第一个匹配指定CSS选择器组的元素。如果找不到匹配项，则返回 null。

2. :last-child 伪类选择器::last-child 匹配其父元素的最后一个子元素。

   

   EasySite

   零代码AI网站开发工具

   下载

通过将这两个结合起来，我们可以在父元素内部找到最后一个div子元素。

修改后的JavaScript代码:

function selectedAfternoon(element) {
    var text = element.options[element.selectedIndex].value;
    var outputDiv = document.getElementById("output-selected-option-afternoon");

    // 1. 生成并设置内部HTML
    outputDiv.innerHTML = "
" + text.split("|").join("
") + "
";

    // 2. 找到父元素内最后一个 div 子元素，并添加 'price' 类
    // 注意：这一步必须在 innerHTML 设置之后执行，确保 DOM 元素已存在
    var lastDiv = outputDiv.querySelector("div:last-child");
    if (lastDiv) { // 确保元素存在
        lastDiv.classList.add("price");
    }
}

// 另一个类似的函数
function selectedCommute(element) {
    var text = element.options[element.selectedIndex].value;
    var outputDiv = document.getElementById("output-selected-option-commute");
    outputDiv.innerHTML = "
" + text.split("|").join("
") + "
";
    var lastDiv = outputDiv.querySelector("div:last-child");
    if (lastDiv) {
        lastDiv.classList.add("price");
    }
}

CSS样式（可选，用于视觉确认）:

为了验证price类是否成功添加，我们可以为其定义一个简单的CSS样式。

.price {
  color: red; /* 将价格文本显示为红色 */
  font-weight: bold; /* 加粗 */
}

/* 其他原有样式 */
.js-basic-single {
  width: 100%;
}

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

完整示例

将HTML、修改后的JavaScript和CSS结合起来，即可实现所需功能。

HTML:

  
  13x19 cm, €12.50
  20x30 cm, €22.50
  30x45 cm, €32.50
    Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen.,  



  
  Onderweg 13x19 cm, €12.50
  Onderweg 20x30 cm, €22.50
  Onderweg 30x45 cm, €32.50
    Wil je meer stuks of formaten van deze foto? Vermeld dit dan in de winkelwagen.,  



  

  

JavaScript:

function selectedAfternoon(element) {
    var text = element.options[element.selectedIndex].value;
    var outputDiv = document.getElementById("output-selected-option-afternoon");
    outputDiv.innerHTML = "
" + text.split("|").join("
") + "
";
    var lastDiv = outputDiv.querySelector("div:last-child");
    if (lastDiv) {
        lastDiv.classList.add("price");
    }
}

function selectedCommute(element) {
    var text = element.options[element.selectedIndex].value;
    var outputDiv = document.getElementById("output-selected-option-commute");
    outputDiv.innerHTML = "
" + text.split("|").join("
") + "
";
    var lastDiv = outputDiv.querySelector("div:last-child");
    if (lastDiv) {
        lastDiv.classList.add("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. 执行顺序: 确保在尝试查找并修改DOM元素（如querySelector和classList.add）之前，该DOM元素已经通过innerHTML或其他方式被创建并添加到文档中。
2. 错误处理: 在实际应用中，querySelector可能返回null（如果找不到匹配元素），因此在使用其结果之前进行null检查（如if (lastDiv)）是一个良好的编程习惯。
3. 替代方案: 除了querySelector("div:last-child")，也可以使用element.children[element.children.length - 1]来获取父元素的最后一个子元素（假设所有子元素都是div）。然而，querySelector结合CSS选择器通常更灵活，因为它允许更复杂的选择模式。
4. 性能: 对于少量元素的操作，上述方法性能影响微乎其微。对于大量动态生成的元素，可以考虑使用Document Fragments来批量构建DOM，减少DOM操作次数，从而优化性能。
5. 可维护性: 通过添加语义化的CSS类（如price），可以使代码更具可读性和可维护性。后续的JavaScript逻辑可以直接通过这个类来选择元素，而无需依赖其在DOM中的具体位置。

通过本文介绍的方法，开发者可以轻松地在动态生成内容的场景中，精确地定位并操作特定的DOM元素，从而实现更灵活的样式控制和数据处理。