JQuery 没有找到 td
Posted
技术标签:
【中文标题】JQuery 没有找到 td【英文标题】:JQuery not finding td 【发布时间】:2014-03-27 19:35:40 【问题描述】:我是 javascript/jQuery 的新手,所以请多多包涵。
我在这里设置了一个 JSFiddle:JSFiddle
正如您在 cmets 中看到的那样,在下一列中查找 div 的几次尝试都失败了。
代码在这里:
<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>
这里还有 Javascript:
$('.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());
);
【问题讨论】:
【参考方案1】:alert($(this).closest('td').next().find('.testclass').html());
【讨论】:
【参考方案2】:这样不行吗?
alert($('.testclass').html());
【讨论】:
【参考方案3】:您没有正确选择正确的元素。您可以改为这样做(假设每行只有一个选择和 testclass
结果字段:
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
);
如果每行有多个,可以这样做:
$(this).closest('td').next().find('.testclass').html().trim();
【讨论】:
【参考方案4】:next()
查找元素的下一个兄弟。 http://api.jquery.com/next/
因此,当您使用$(this)
时,您是在告诉搜索与您的.testClass
元素具有相同父级的元素。没有与您正在寻找的元素相匹配的元素。您需要使用parent()
或closest()
向上移动树才能找到所需的元素。
【讨论】:
【参考方案5】:我怀疑您想使用closest 方法来查找包含触发更改事件的select
元素的td
,然后从那里使用next()
获取第二列。像这样:
var secondTd = $(this).closest('td').next();
【讨论】:
【参考方案6】:像这样使用它,
alert($(this).closest("td").next().find('.testclass').html());
因为testclass
在另一个td
中。所以你需要先得到父母,然后选择next()
,它将得到下一个td
。然后就可以找到div了。
Demo
【讨论】:
以上是关于JQuery 没有找到 td的主要内容,如果未能解决你的问题,请参考以下文章