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.
Andrew ScottAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jim RiddlesPrepress/OMS SpecialistCommented:
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

0
Julian HansenCommented:
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

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Olaf DoschkeSoftware DeveloperCommented:
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.
0
Olaf DoschkeSoftware DeveloperCommented:
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.
0
Jim RiddlesPrepress/OMS SpecialistCommented:
Julian answered the author's question with a pure jQuery solution.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.