CODEWITHSUNDEEP
jqueryjquery-selectorsthis
Faiyet
Faiyet

Reputation: 5471

Jquery find subelement from $(this)

I have a table in in which every row contains a form. see below

<table>
<tr><th>Fee Type</th><th>Amount</th><th>% Discount</th><th>Discounted Amount</th><th>Payable to</th><th>Remove</th></tr>    
<tr>
   <form>
         <td></td>
         <td class="cost"></td>
         <td> <input /> </td>
         <td class="discount"></td>
         <td></td>
   </form>
<tr>
</table>

Now my intention is to have a global save button which will loop through each form and perform an ajax post. see below

    function saveEditedFees(){
        $("#savefeechanges").click(function(){
            $("#feestable form").each(function(){
                alert( $(this).attr('id') );
            });
        });
    }

My problem is accessing values for the "td" using the $(this) for the elements with class "cost" and "discount" I tried 

alert( $(this).find("td").eq(2).html() );
alert($(this).siblings('.cost').text());
alert($("td .cost" ,this).text());

Basically, I am trying to test if the value contained in the <td class="cost"> is equal to the <td class="discount"> , this way i will selectively do an ajax post.

Please help.

Upvotes: 1

Views: 16190

Answers (3)

Sinetheta
Sinetheta

Reputation: 9429

$(this).closest('form').find('.cost');

This is similar to another question I answered where I explained traversal.

However, you should refactor your html before proceeding, as a TR element should only contain TDs or THs. If you feel that you need to nest a table inside of another table for layout purposes then so-be-it. I would recommend divs in this case, but breaking table conventions is sure to lead to tears down the roa.

Upvotes: 0

fronzee
fronzee

Reputation: 1818

Did you mean to have a space in your line that says:

alert($("td .cost" ,this).text());

It should be

alert($("td.cost", this).text());

Keep in mind that the context of this is going to mean that this refers to the form element, so siblings() won't work. I think you're on the right track with $("td.cost", this) using either .html() or .text().

Upvotes: 0

RightSaidFred
RightSaidFred

Reputation: 11327

Invalid markup.

You have a <form> as a child of <tr>.

In Chrome, the HTML is rendered as:

<tr>
   <form></form>
         <td></td>
         <td class="cost"></td>
         <td> <input> </td>
         <td class="discount"></td>
         <td></td>
</tr>

As you can see, the <form> no longer has any content.

And remember that .eq() takes a zero-based index, so it should be:

$(this).find("td").eq(1)

...to get the .cost element.

Upvotes: 10

Related Questions