CODEWITHSUNDEEP
jqueryparentclosest
Joel James
Joel James

Reputation: 1345

Find closest td from another table using class

I have a table inside the td of another table. But I am getting length as 0 when I check the length of closest td using class. My HTML and jQuery is giev below.

<div class="form-group col-md-12">
    <table class="table jewel_spec_table">
        <tbody>
            <tr class="jewel_type_field">
                <td class="jewel_type_td">
                    <table class="table">
                        <thead class="text-center">
                            <tr>
                                <th>Jewel Type</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <select name="jewel_type" class="form-control jewel_type">
                                        <option value="test">Test</option>
                                        <option value="test">Test</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td class="spec_table">

                    <p>Test</p>
                    <!-- We need content here -->

                </td>
                <td>
                    <div class="text-right">
                        <a class="btn-xs btn-info add_jeweltype"><i class="fa fa-plus"></i></a>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

I use below script to add some content to the closest td with class spec_table

$(document).on('change',".jewel_type",function(){
    $(this).closest('.spec_table').html('New content');
});

Any idea why it is showing 0 always?

Upvotes: 0

Views: 2100

Answers (4)

Magicprog.fr
Magicprog.fr

Reputation: 4100

closest function take as param: selectors, context.

In your case, selector is td and context is .spec_table

If you have this table:

<table class="spec_table">
    <tr>
        <td>123456</td>
    </tr>
</table>

Use:

$(document).on('change',".jewel_type",function(){
    alert($(this).parents().find('.spec_table td').length);
});

JSfiddle: http://jsfiddle.net/ghorg12110/2nh63fym/

Upvotes: 0

meskobalazs
meskobalazs

Reputation: 16031

The closest() function is described as:

the .closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements (emphasis mine)

It returns an empty NodeList, because the element with the .spec_table class is not an ancestor of $(this).

To solve your task, you could select the .jewel_spec_table object, then make a selector on it to get the needed elements:

$('.jewel_spec_table').find('.spec_table')

This will give you the NodeList you wanted, then you can select the first item. The whole handler:

$(document).on('change',".jewel_type",function(){
    $('.jewel_spec_table').find('.spec_table')[0].html('New content');
});

Upvotes: 1

Jai
Jai

Reputation: 74738

The element you are targeting is a sibling of closest table's parent td: 

$(this).closest('table').parent().siblings('.spec_table').length

explanations: 

$(this) // select element as per context
.closest('table') // get back to the table element
.parent() // now get the parent "td" of closest table
.siblings('.spec_table') // here you have to get the siblings of the parent td
.length // this results === 1

Any idea why it is showing 0 always?

Because you are trying to get the target element which is not accessible with .closest() method as in the context of your selector. You can see when it gets executed what happens: 

$(this) // current element which is select
.closest('.spec_table') // doesn't have any parent with such class. so results === 0

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

try:

$(document).on('change',".jewel_type",function(){
    alert($(this).parents('.jewel_type_field').find('.spec_table').length);
});

Upvotes: 1

Related Questions