How to traverse table element in jquery??

Andrew Scott
Andrew Scott used Ask the Experts™
on
Hello I am new to jquery. I want to traverse this table .
<div id="compare">
    <table>
        <thead></thead>
        <tbody>
            <tr class="stock4">
                <td>
                    <img src="abc.jpg" alt="">
                </td>
                <td class="price">
                    <div>
                        1000
                        <div class="variant">
                            <table>
                                <thead></thead>
                                <tbody>
                                    <tr class="stock4">
                                        <td class="price">2000</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Open in new window



I want a  price only 1000 not 2000 from variant div.How can I do it. I have tried many procedure but I didnt succeed.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jim RiddlesPrepress/OMS Specialist

Commented:
If all you want to do is to change the price, it would look like the following:
$('div.variant table tbody tr.stock4 td.price').html('1000');

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Your problem is complicated by the fact that you have a nested table with the same class as the the element you are targeting. So what you need to do is grab the whole table, clone it, remove the .variant bit and then pull the .text() from the remaining markup selecting by .price and trimming the result.

Something like this
$(function() {
  // Clone the outer table 
  var table = $('#compare > table').clone();

  // Remove the .variant
  table.find('.variant').remove();

  // Get the price from what is left and trim it
  var price = table.find('.price').text().trim();

  console.log(price);
});

Open in new window

Olaf DoschkeSoftware Developer

Commented:
In this specific case you could use this mix of jQuery and then pure JS:

var pricediv;
pricediv = $('.price').clone().children('div')[0];
while (pricediv.firstChild.nextSibling) {
  pricediv.removeChild(pricediv.firstChild.nextSibling);
}
alert(pricediv.innerHTML);

Open in new window


In the end, I would aim for more generic code removing the unwanted child sibling nodes to get to the core text value you want.
Julian's solution has to be preferred as pure jQuery. And in fact, I think you don't get around cloning.

What you need more generally depends on what the sub nodes could become in other examples, I think this could become more complex and so just removing all variant class child nodes would not suffice in the more general case.

What you need is the firstChild of the div without any sibling nodes. Not sure how to do this more elegantly in jQuery without falling back to JS with the initial jQuery nodes result.

Bye, Olaf.
Olaf DoschkeSoftware Developer

Commented:
You may also go the simple route of a substring of innerHTML:

var pricediv;
pricediv = $('.price').children('div')[0];
text = pricediv.innerHTML;
alert(text.substr(0,text.indexOf('<')));

Open in new window


Bye, Olaf.
Jim RiddlesPrepress/OMS Specialist

Commented:
Julian answered the author's question with a pure jQuery solution.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start Today