javascript - 无法使用 "next()"或 "closest()"在 DOM 中找到元素

Question

我有这个 DOM 树:

<div class="field-group">
    <label for="timetracking_originalestimate">Original Estimate</label>
    <input class="text short-field" id="timetracking_originalestimate" name="timetracking_originalestimate" value="3d 5h" readonly="readonly" type="text">
    <span class="aui-form example">(eg. 3w 4d 12h)</span>
    <a class="help-lnk" href="/jira/secure/ShowTimeTrackingHelp.jspa?decorator=popup#TimeTracking" title="Get local help about Time Tracking" data-helplink="local">
        <span class="aui-icon aui-icon-small aui-iconfont-help"></span>
    </a>
    <div class="description">The original estimate of how much work is involved in resolving this issue.</div>
</div>

我首先通过 ID #timetracking_originalestimate 获取元素。

现在我想获取带有 ID 的预搜索元素之后带有 description 类的第一个元素。

我怎样才能到达那里？ next() 和 closest() 不起作用...

Answer 1

有几种方法可以实现这一点:

$('#timetracking_originalestimate').closest('.field-group').find('.description');
//Or
$("#timetracking_originalestimate").nextAll(".description");
//
$("#timetracking_originalestimate").siblings('.description');

因为description 是#timetracking_originalestimate 的兄弟，所以我建议使用jQuery 方法 siblings() 定位使用 text() 的元素 获取元素的文本，例如:

console.log( $("#timetracking_originalestimate").siblings('.description').text() );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="field-group">
  <label for="timetracking_originalestimate">Original Estimate</label>
  <input class="text short-field" id="timetracking_originalestimate" name="timetracking_originalestimate" value="3d 5h" readonly="readonly" type="text">
  <span class="aui-form example">(eg. 3w 4d 12h)</span>
  <a class="help-lnk" href="/jira/secure/ShowTimeTrackingHelp.jspa?decorator=popup#TimeTracking" title="Get local help about Time Tracking" data-helplink="local"><span class="aui-icon aui-icon-small aui-iconfont-help"></span></a>
  <div class="description">The original estimate of how much work is involved in resolving this issue.</div>
</div>