无法使用“ next()”或“ closest()”在DOM中找到元素

时间:2018-09-27 11:35:30

标签: javascript jquery html dom

我有这个DOM树:

var interval = 1000;
timer(0, interval).pipe(
          switchMap(_ => this.http.get('api/health').pipe(onErrorResumeNext()))
        ).subscribe(response => this.savedResponse = response);

然后从ID <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的第一个元素。

我怎么到那里? descriptionnext()不起作用...

3 个答案:

答案 0 :(得分:1)

有几种方法可以做到这一点:

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

由于description#timetracking_originalestimate的兄弟姐妹,我建议使用jQuery方法 siblings() 将元素定位为使用 {{3} } 来获取元素的文本,例如:

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>

答案 1 :(得分:0)

您可以使用.nextAll()查找下一个.description

$("#timetracking_originalestimate").nextAll(".description");

$("#timetracking_originalestimate").nextAll(".description").css("color", "red");
<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>

答案 2 :(得分:0)

使用siblings()在jquery中查找同级元素

$(document).ready(function(){
  var html = $("#timetracking_originalestimate").siblings(".description").html();
  alert(html);
});
<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>