Question

好的，我是JavaScript的新手，所以我真的需要帮助。我有一个脚本，看起来像这样：

  var p = new Ping();

  p.ping("http://bf3.in", function(data) {
    document.getElementById("ping").innerHTML = data;
  });

 ............. some code goes here ........

<td id = 'ping'>line 1</td>
<td id = 'ping'>line 2</td>

我的问题是有多个标签想要使用这个功能，但我只能在一个标签上使用id =“ping”，所以我需要一个替代getElementById，一个允许我使用多个标签

---------------- UPDATE -----------------------

这是我的完整代码http://bf3.in/ping.txt 实际上iam托管一些游戏服务器所以需要ping serevr ip。这是客户登录http://bf3.in/launcher/login.php的地方用户名：juno 密码：juno 谢谢:)）

Answer 1

ID只应用于引用单个唯一元素。如果您想要将元素组合在一起然后使用class - 那么您可以执行document.getElementsByClassName('ping');，这将返回一个元素数组。

所以：

<table>
     <td class = 'ping'>line 1</td>
     <td class = 'ping'>line 2</td>
</table>

然后 document.getElementsByClassName('ping');将返回包含td个元素的数组。可以使用常规数组索引访问。

但除非您的表格显示表格数据，否则最好使用div而不是表格。它不再是90年了。

Answer 2

您可以使用getElementsByTagName，querySelectorAll() 或者您可以使用getElementsByClassName

注意，所有这些都将返回一个节点列表。因此，如果您将getElementById替换为其中任何一项，则无效。你必须做这样的事情

p.ping("http://bf3.in", function(data) {
   document.querySelectorAll(".ping").forEach(function(element){
      element.innerHTML = data;
})
});
<td class='ping'>line 1</td>
<td class='ping'>line 2</td>

假设您正在努力实现这样的目标。

Answer 3

是的，您可以使用document.querySelectorAll函数查询任何CSS选择器，也可以使用document.getElementsByClassName基于类进行查询。由于元素不能具有多个ID，因此无法基于多个ID进行查询。

要小心将结果转换为数组而不是使用Array.from的数组类对象，以便使用filter和map等扩展方法。

Answer 4

由于id在文档中必须是唯一的，因此请使用类。

假设您有以下标记：

$(document).ready(function(){ ... })

您要做的是获取课程<table> <tr> <th>Ping</th> <th>Ping</th> <th>Ping</th> </tr> <tr> <td class="ping">{{ ping }}</td> <td class="ping">{{ ping }}</td> <td class="ping">{{ ping }}</td> </tr> </table>的所有元素。

使用document.querySelectorAll()期望包含一个或多个CSS选择器的字符串以逗号分隔。这将返回NodeList，它基本上只是您可以迭代的节点集合。

.ping

(function() {

  let pings = document.querySelectorAll('.ping');

  function fetchPing(i) {
    return `ping ${i} data`; //..fetch ping data.
  }

  pings.forEach((p, i) => {
    p.textContent = fetchPing(i);
  });

})();

注意：

如果您提取的数据只是纯文本，请出于性能和安全原因使用textContent代替<table> <tr> <th>Ping</th> <th>Ping</th> <th>Ping</th> </tr> <tr> <td class="ping">{{ ping }}</td> <td class="ping">{{ ping }}</td> <td class="ping">{{ ping }}</td> </tr> </table>。

GetElementById还有其他选择吗？

4 个答案: