JQuery not finding td

Question

I am very new to Javascript/jQuery, so please bear with me.

I have setup a JSFiddle here: JSFiddle

As you can see in the comments, several attempts to find the div in the next column are failing.

Code here:

<table>
<tr id="testtr">
    <td id="fail">
        <select class="part_number" id="part_select_from_blanks" name="part_number">
            <option value="">Select a Part</option>
            <option desc="Dr. Orion Dickinson" value="32">Alice Wyman</option>
            <option desc="Fabiola Harvey" value="31">Camryn Tillman</option>
        </select>
    </td>
    <td id="fail2">
        <div id="desc_from_blank2" class="testclass">test</div>
    </td>
</tr>

And Javascript here:

$('.part_number').change(function () {
    var sel = $("option:selected", this);
    var desc = sel.attr('desc');
    alert(desc);
    //alert($('.part_number option:selected').attr('desc'));

    // This one finds the div correctly
    alert($('#desc_from_blank2').attr('id'));

    // This one only finds the div if I remove the <table> from html
    alert($(this).next().attr('id'));

    // this one never finds the div
    alert($(this).next("div").attr('id'));

    // This one never finds the div
    alert($(this).next().find('.testclass').html());

    // This works when I delete <table> from html, but not with <table>
    $(this).next().html(desc);
    alert($(this).next().html());
});

Answer 1

alert($(this).closest('td').next().find('.testclass').html());

Answer 2

Won't this do it?

alert($('.testclass').html());

Answer 3

You aren't correctly selecting the right element. You could do this instead (assuming you only have one select and testclass result field on each row:

alert(
    $(this)               // select
      .closest('tr')      // parent table row
      .find('.testclass') // search for the div with testclass class
      .html()             // get the HTML contents
      .trim()             // remove any unnecessary whitespace from either end
);

If you have more than one per row, you can do this:

$(this).closest('td').next().find('.testclass').html().trim();

Answer 4

next() finds the next sibling of the element. http://api.jquery.com/next/

So when you are using $(this), you are telling to search for elements that have the same parent as your .testClass element. There are no elements matching what you are looking for there. You need to move up the tree with parent() or closest() to find the elements that you want.

Answer 5

I suspect you want to use the closest method to find the td that encloses the select element that fired the change event, then from there, use next() to get the second column. Like so:

var secondTd = $(this).closest('td').next();

Answer 6

use it like,

alert($(this).closest("td").next().find('.testclass').html());

Because testclass is in the other td. So you need to get the parent first, Then select the next() which will get the next td. Then you can find the div.

Demo