Question

我目前正在努力完成一个非常简单的javascript任务，但我是新手，所以它让我很困惑。

e.g。 HTML

<div class="item">
            <div class="title">Item 1 Title</div>
            <div class="description-1">lorum</div>
            <div class="description-2">ipsum</div>
            <div class="description-combined"></div>
        </div>

所以我需要结合第1段和第1段。 2，并替换第3段中的空信息。我还没有使用jQuery，所以我的研究因此造成了挣扎....我目前有：

var p1 = getElementsByClassName ('description-1').innerHTML;
var p2 = getElementsByClassName ('description-2').innerHTML;
var p3 = p1 + P2
document.getElementsByClassName ('description-combined').innerHTML = p3

我确实让p3拥有p1.concat（p2），但是没有用。我正在使用它作为外部文件，所以我可能会错过在HTML文件中添加内容。

Answer 1

编辑会更改问题。

我可能做的是循环遍历.item元素，并结合其中的描述。

document.getElementsByClassName是document的属性，不是独立函数，它返回匹配元素的列表。它也没有document.querySelector和document.querySelectorAll广泛支持，所以我可能会使用这些;对于我们正在谈论的内容，我们还需要Element#querySelector。

＆＃13;

// Get a list of the items and loop through it
Array.prototype.forEach.call(document.querySelectorAll(".item"), function(item) {
  // Get the two description divs, and the combined, that
  // are *within* this item
  var d1 = item.querySelector(".description-1");
  var d2 = item.querySelector(".description-2");
  var c  = item.querySelector(".description-combined");
  
  // Set the combined text (this assumes we have them all)
  c.innerHTML = d1.innerHTML + d2.innerHTML;
});

＆＃13;

.description-combined {
  color: green;
}

＆＃13;

<div class="item">
  <div class="title">Item 1 Title</div>
  <div class="description-1">One description 1</div>
  <div class="description-2">One description 2</div>
  <div class="description-combined"></div>
</div>
<div class="item">
  <div class="title">Item 2 Title</div>
  <div class="description-1">2 description 1</div>
  <div class="description-2">2 description 2</div>
  <div class="description-combined"></div>
</div>
<div class="item">
  <div class="title">Item 3 Title</div>
  <div class="description-1">3 description 1</div>
  <div class="description-2">3 description 2</div>
  <div class="description-combined"></div>
</div>

＆＃13;

Array.prototype.forEach.call(list, function() { ... });这是一种循环遍历任何类数组的方法，但不是一个数组。它在this other answer中有更多解释，它也有几种选择。

使用javascript结合html段落

1 个答案: