Question

我有以下HTML代码 -

<div class="search_results">...</div>
<div class="search_results">...</div>
<div class="search_results">...</div>

div由javasciprt函数自动生成。有没有办法只使用javascript访问同一类名“search_results”的第一个div /或特定div？

Answer 1

您可以使用getElementsByClassName返回NodeList（类似于数组的对象）。然后，您可以使用常规数组语法访问其中的各个元素。此示例将返回第一个元素：

var firstDiv = document.getElementsByClassName("search_results")[0];

或者，你可以使用querySelector，它返回找到的第一个元素：

var firstDiv = document.querySelector(".search_results");

如果要返回所有匹配的元素，可以使用querySelectorAll，它返回一个NodeList，如getElementsByClassName。

Answer 2

使用getElementsByClassName或querySelector（如果有）：

function findElementsByTagNameAndClassName(tag, class_name) {
  if(typeof document.querySelector !== 'undefined') {
     return document.querySelector(tag + ' .' + class_name);
  }

  var els = document.getElementsByClassName(class_name);
  var result = [];
  for(var i = 0; i < els.length; ++i) {
     if(els[i].nodeName === tag) {
        result.push(els[i]);
     }
  }
  return result;
}

var firstDiv = findElementsByTagNameAndClassName('div', 'search_results')[0];

Answer 3

如果您使用JQuery $(".search_results").first()。否则，您需要使用document.getElementsByClassName("search_results")[0];

Answer 4

如果你正在使用JQuery：

$（“div.search_results”）。first（）用于更高版本的JQuery，$（“div.search_results”）[0]用于旧版本。

没有Jquery： document.getElementsByClassName

Answer 5

如果要访问特定实例，则需要为元素添加id属性，例如：

<div class="search_results" id="result_1">...</div>
<div class="search_results" id="result_2">...</div>
<div class="search_results" id="result_3">...</div>

如果这不是一个选项，你可以使用

访问带有classname（从0开始）的第n个项目

var divN = document.getElementsByClassName("search_results")[n];

使用javascript访问相同类名的div

5 个答案: