Question

<td class="a-right">
  <span class="price-excl-tax">
    <span class="price">$299.00</span>
  </span>
  <br>
</td>

我在HTML中生成了上面的代码。我需要使用JS Prototype来获取内部跨度的值。有多个跨度与＃34; price＆＃34;类，但只有这一个嵌套在类＃34; price-excl-tax＆＃34;。

http://prototypejs.org/doc/latest/Prototype/Selector/

这就是我所拥有的：

console.log("Base price is: " + $$('price-excl-tax')[0].$$(span.price[0]).value);

Answer 1

为什么不使用子选择器。请参阅以下代码snipet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="a-right">
  <span class="price-excl-tax">
    <span class="price">$299.00</span>
  </span>
  <br>
</td>
<script>
console.log("Base price is: " + $("price-excl-tax > price"));
</script>

Answer 2

就像Barmar所提到的那样，使用$$()和CSS Child Selector（虽然基本Descendant Selector也可以）'.price-excl-tax > .price'。

请参阅以下示例中说明的内容。请注意，它使用Event.observe()作为dom:loaded事件（PrototypeJS独有），以确保在查询之前加载DOM。另请注意，innerHTML属性用于获取price元素的内容，但如果没有嵌套的HTML节点，也可以使用.textContent。

document.observe("dom:loaded", function() {
  var priceContainers = $$('.price-excl-tax > .price');
  if (priceContainers.length) { //Greater than 0
    console.log("Base price is: " + priceContainers[0].innerHTML);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
<table>
  <tr>
    <td class="a-right">
      <span class="price-excl-tax">
    <span class="price">$299.00</span>
      </span>
      <br>
    </td>
  </tr>
</table>

另一种方法是使用Element.select()。类似的东西：

var priceExclTaxContainers = $$('.price-excl-tax');
if (priceExclTaxContainers.length) { //not empty
    var priceContainers = priceExclTaxContainers.select('.price');
    if (priceContainers.length) {
          //utilize priceContainers[0].innerHTML
    }
}

JS Prototype使用类中的类

2 个答案: