Question

如何使用标记“rating”从此HTML中提取所有3个值。

我试过了：

document.getElementsbyTagName("rating")  
 var ratings = ratingPage.querySelector("div.rating").innerText;

这个有效，但仅限于第一次出现“评级”。

<div class="rating-slider">
          <div class="label">First</div>
          <div class="rating">4.2</div>
          <div class="slider">
            <div class="rate-slider" data-rating="good">
              <div class="ui-slider-range" style="width:83.99999618530273%"></div>
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 83.99999618530273%;"></a>
            </div>
          </div>
        </div>
        <div class="rating-slider">
          <div class="label">Second</div>
          <div class="rating">3.4</div>
          <div class="slider">
            <div class="rate-slider"  data-rating="average">
              <div class="ui-slider-range" style="width:68.00000190734863%"></div>
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 68.00000190734863%;"></a>
            </div>
          </div>
        </div>
        <div class="rating-slider">
          <div class="label">Third</div>
          <div class="rating">1.9</div>
          <div class="slider">
            <div class="rate-slider" data-rating="poor">
              <div class="ui-slider-range" style="width:37.99999952316284%"></div>
              <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 37.99999952316284%;"></a>
            </div>
          </div>
        </div>
      </div

我正试图抓住每一个并将它们存储在自己的变量中。

Answer 1

这是因为你需要使用getElementsByClassName()函数，因为你似乎是针对实际的类而不是标记：

var ratings = document.getElementsByClassName('rating');

如果您只想存储这些值，您可以显式遍历此集合并为每个集合提取必要的HTML：

for(var r = 0; r < ratings.length; r++){
    // Set each value using ratings[r].innerHTML;
}

或者你可以使用像Array.map()函数这样的东西将每个元素映射到它们的值的解析版本：

// This will yield [4.2, 3.4, 1.9]
var actualRatings = Array.prototype.map.call(ratings, function(elem){ 
                       return parseFloat(elem.innerHTML);
                    });

Answer 2

var ratings = document.querySelectorAll("div.rating");

或

var ratings = document.getElementsByClassName("rating"); // preferred`
for(var i = 0; i < ratings.length; i++) {
    console.log(ratings[i].innerText);
}

Answer 3

您需要使用此选择器：

document.getElementsByClassName("rating");

此方法将返回文档中具有指定类名的所有元素的集合。

您可以在此页on this page

上详细了解此选择器和用法

提取具有相同名称的多个div标签

3 个答案: