Question

我试图将具有相同类名的div中的每个用户名一个一个地复制到输入字段中。

我知道它将所有div中的文本复制到单击按钮时输入的内容，但是如何分隔用户名？

将名称一一复制到输入中，因此，如果我按下按钮，它将复制名称1进行输入；如果再次按下按钮，它将复制名称2进行输入，但是删除名称1；如果再次按下，它将复制名称3进行输入，删除名称2

我如何拆分，使其仅复制一个用户名进行输入？

var elems = document.getElementsByClassName("leaders");
var counter = elems.length;

function getUsers() {
  var Elem;
  if (counter <= 0)
    counter = elems.length;
  Elem = elems[counter - 1];
  document.getElementById("inp").value = Elem.innerText.split(" — ")[0].split(", ");
  counter--;
}

<div class="user-list">
  <div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
  <div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
  <div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
  <div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
  <div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>
<br>


<input type="text" id="inp" style="width: 40%;"> &nbsp;
<button style="width: 40%;" onclick="getUsers();">copy user name to input</button>

Answer 1

您可以使用split()拆分用户并将其添加到单独的数组中，然后在需要时使用concat()与所需的定界符进行合并：

function getUsers() {
  var users = [];
  var el = document.getElementsByClassName("leaders");

  if (el.length) {
    for (x = 0; x < el.length - 1; x++) {
      users = users.concat(el[x].innerText.split(" — ")[0].split(", "))
    }
  }

  document.getElementById("inp").value = users.join(' - ');

  console.log(users);
}

<input type="text" id="inp" style="width: 100%;"> &nbsp;
<button onclick="getUsers();">copy user name to input</button>
<br>
<div class="user-list">
  <div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
  <div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
  <div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
  <div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
  <div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>

Answer 2

var elems = document.getElementsByClassName("leaders");
var counter = elems.length;
var arrayLength=0;
var maxLengthArray=0;

function getUsers() {
  var Elem;
  if (counter <= 0)
    counter = elems.length;
  Elem = elems[counter - 1];
  document.getElementById("inp").value = Elem.innerText.split(" — ")[0].split(", ")[arrayLength];
  maxLengthArray=Elem.innerText.split(" — ")[0].split(", ").length;
 if(maxLengthArray==arrayLength){
    arrayLength=0;
    counter--;
 }else{
    arrayLength++;
 }
}

<div class="user-list">
  <div class="leaders">user 1, user 2, user 3, user 4 — <strong>1</strong></div>
  <div class="leaders">user 5, user 6, user 7, user 8 — <strong>2</strong></div>
  <div class="leaders">user 9, user 10, user 11, user 12 — <strong>3</strong></div>
  <div class="leaders">user 13, user 14, user 15, user 16 — <strong>4</strong></div>
  <div class="leaders">user 17, user 18, user 19, user 20 — <strong>5</strong></div>
</div>
<br>


<input type="text" id="inp" style="width: 40%;"> &nbsp;
<button style="width: 40%;" onclick="getUsers();">copy user name to input</button>

我希望这是您的预期结果。

Answer 3

git tag -a 1.1.0 SHA1 -m "Release 1.1.0"

function getUsers() {
//to remove strong tags
var nodes = document.getElementsByTagName("strong");
for (var i = 0, len = nodes.length; i != len; ++i) {
    nodes[0].parentNode.removeChild(nodes[0]);
}

  var nameArray = "";
  var elems = document.getElementsByClassName("leaders");
  if (elems) {
    for (x = 0; x < elems.length; x++) {
      var res = elems[x].innerText;
      nameArray = res.split(",");
      inp.value += nameArray;
    }
  }
}

从div获取innerText以输入javascript

3 个答案: