将数组中的每个字母分配给来自querySelector All的div

时间:2019-01-12 18:50:58

标签: javascript css

我的HTML中有6个div,每个div都保留自己的字母。

我有一个查询选择器来捕获所有div。我遍历了所有div,为每个div创建了一个div,我想将数组中的字母分别分配给每个div。虽然它只显示S,但是有人可以协助吗?

基本上,对于每个DIV,我希望数组中的字母“ Smiley”都是1个字母

void run_program(std::string const &admin_name, std::string const &cmd) { 
    std::strings buffer = "runas /user:" + admin_name + " " + cmd;

    system(buffer.c_str());
}

4 个答案:

答案 0 :(得分:2)

不确定为什么要创建一个新的div。

在这里,我使用了POST <your_index_name>/_search { "query": { "bool": { "should": [ { "nested": { "path": "data.inventory.locations", "query": { "match": { "data.inventory.locations.state": "CA" } } } }, { "nested": { "path": "data.inventory.locations", "query": { "match": { "data.inventory.locations.state": "NY" } } } } ] } }, "sort": [ { "data.inventory.locations.amount": { "order": "desc", "mode": "sum", "nested_path": "data.inventory.locations", "nested_filter": { "terms": { "data.inventory.locations.state": ["CA","NY"] } } } } ] } 中的索引来从smiley数组中获取正确的元素,并将CSS类添加到圈子中。我还向CSS添加了一个forEach语句,因此文本可以水平运行。

inline-block
let charDivs = document.querySelectorAll("div");

function createLetters() {
  let smiley = ["S", "M", "I", "L", "E", "Y"];
   charDivs.forEach((circle, i) => {
    circle.classList.add('circle');
    circle.textContent = smiley[i];
  });
}

createLetters();
.circle {
  display: inline-block;
  position:relative;
  font-size:2rem;
  font-weight:bold;
}

答案 1 :(得分:1)

快速解决方案:

let charDivs = document.querySelectorAll("div");


let createLetters = () => {
  let smiley = ["S", "M", "I", "L", "E", "Y"];

   charDivs.forEach((el,indx) => {
    let circle = document.createElement("DIV");

    circle.style.cssText = "position:relative;font-size:2rem;font-weight:bold";
    // Use the charDiv index to extract corresponding letter from smiley array
    // You can add some verification if the index is in the allowed range (smiley.length)
    circle.textContent = smiley[indx];
    el.appendChild(circle);
  });
};

答案 2 :(得分:1)

这是使用传统for循环的一种可能的解决方案 与其他答案不同,我的检查确保您没有超出数组的范围(笑脸)

let charDivs = document.querySelectorAll("div");


let createLetters = () => {
  let smiley = ["S", "M", "I", "L", "E", "Y"];
  //Use traditional for-loop
  for(let x = 0; x < charDivs.length; x++){
      let circle = document.createElement("DIV");
      circle.style.cssText = "position:relative;font-size:2rem;font-weight:bold";
      circle.textContent = x > charDivs.length - 1 ? smiley[x % (charDivs.length - 1)] : smiley[x]; //Just in case you ever had more divs than you do values in the smiley array
      charDivs[x].appendChild(circle);
  }

};

答案 3 :(得分:0)

.forEach内,您需要做的就是将属性附加到el变量中。当您创建一个新的charDivs时实际上是没有用的。您可以简单地删除circle变量并使用上面的答案,或者

function createLetters() {
  let smiley = ["S", "M", "I", "L", "E", "Y"];
  smiley.forEach((letter) => {
    let charDiv = document.createElement("div");
    charDiv.textContent = letter;
    charDiv.classList.add('circle');
    document.body.appendChild(charDiv);
  });
}

createLetters();
.circle {
  display: inline-block; /* You can change this to block if you want one on each line */ 
  position:relative;
  font-size:2rem;
  font-weight:bold;
}

我什至不会手动创建div,因为您也可以循环创建它!不要忘了最后使用document.body.appendChild(),否则它什么也不会显示!