Avatar of Andrew Scott
Andrew Scott
 asked on

How to traverse table element in jquery??

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.
JavaScriptjQuery

Avatar of undefined
Last Comment
Jim Riddles

8/22/2022 - Mon
Jim Riddles

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

ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Olaf Doschke

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 Doschke

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Jim Riddles

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