Question

如下所示，当我从引导程序下拉菜单中选择一个值时，我正在尝试更新跨度的html。我试图通过类“requestStatus”的下拉菜单更新下一个跨度。

我认为像$（this）.closest（'。requestStatus'）。html（'updated status'）;应该这样做，但没有这样的运气。

以下是相关标记：

<div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
      <ul class="pull-right dropdown-menu btnUpdateRequestStatus" role="menu">
        <li><a href="...">In progress</a></li>
        <li><a href="...">Complete</a></li>
        <li><a href="...">Cancel</a></li>
      </ul>
    </div>
    some text <span class="requestStatus">status goes here...</span>
  </div>
</div>

这是jquery：

$(document).on("click", ".btnUpdateRequestStatus", function(e){
  e.preventDefault();

  $.ajax({
    async: false,
    type: 'GET',
    cache: false,
    url: $(e.target).attr('href'),
    success: function(response){ 
      $(e.target).closest('.requestStatus').html('updated status');
    },
    error: function(){
      ...
    }
  });
});

我知道有很多类似的问题，但我似乎已经尝试了所有的建议，但似乎没有任何工作（不断只是“未定义”）。

Answer 1

因为那些不是祖先的后代元素

$(e.target).closest('.btn-group').nextAll('.requestStatus').html('updated status');

$(document).on("click", ".btnUpdateRequestStatus", function(e) {
  e.preventDefault();

  $(e.target).closest('.btn-group').nextAll('.requestStatus').html('updated status');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span>
    </button>
    <ul class="pull-right dropdown-menu btnUpdateRequestStatus" role="menu">
      <li><a href="...">In progress</a></li>
      <li><a href="...">Complete</a></li>
      <li><a href="...">Cancel</a></li>
    </ul>
  </div>
  some text <span class="requestStatus">status goes here...</span>
</div>

Answer 2

变化：

$(e.target).closest('.requestStatus').html('updated status');

为：

$(e.target).closest('div.btn-group').parent().find('span.requestStatus').html('updated status');

<强> jsFiddle example

使用jquery使用特定类更新下一个span

2 个答案: