JS Prototype use a class within a class

Question

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

I have the above code in HTML being generated. I need to use JS Prototype to get the value of the inner span. There are multiple spans with the class of "price", but only this one is nested inside of the class "price-excl-tax".

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

this is what I have:

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

You need . at the beginning of a class name. You should be able to use $$('.price-excl-tax .price') to match a class inside a class. Just like CSS selectors. — Barmar
– Barmar, Commented Apr 24, 2017 at 17:48
This is essentially a CSS question about descendant or child selectors, has very little to do with JavaScript. — Paolo Moretti
– Paolo Moretti, Commented Apr 24, 2017 at 17:50
I disagree it has little to do with javascript. Normally I would say select by class or ID. In this particular style it does not have so adding the . to indicate class would make sense. Thanks to Barmar I am now aware of this instead of assuming. — camdixon
– camdixon, Commented Apr 25, 2017 at 12:04

sumit chauhan · Accepted Answer · 2017-04-24 17:50:16Z

1

why not use child selector. see the below code 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>

answered Apr 24, 2017 at 17:50

sumit chauhan

1,3001 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Walter Over a year ago

Almost -- the single dollar sign is "Find by ID", and the double-dollar sign is "Find by CSS", and always returns an array of found objects (or an empty array). Try $$('.price-excl-tax > .price').first() to get the first one, or iterate over the found collection with each().

Sᴀᴍ Onᴇᴌᴀ Over a year ago

The OP used the tag PrototypeJS, not jQuery; it is not recommended to include a solution with a different JavaScript library.

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-05-03 22:59:12Z

Just as Barmar mentioned, use $$() with a CSS Child Selector (though a basic Descendant Selector would work as well) like '.price-excl-tax > .price'.

See this illustrated in the example below. Note that it utilizes Event.observe() for the dom:loaded event (unique to PrototypeJS) to ensure the DOM is loaded before querying it. Also note that the innerHTML property is used to get the contents of the price element, though .textContent could also be used if there are no nested HTML nodes.

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>

An alternate approach would be to use Element.select(). Something like:

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

Collectives™ on Stack Overflow

JS Prototype use a class within a class

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related