Question

我正在尝试在同一个父对象上使用jQuery功能.find（）和.html（）。像这样：

$('.confirm-booking')
 .find('.config_shipper_label')
 .html(formConfig.shipper_labels === 1 ? 'Yes' : 'No')
 .find('.config_batteri')
 .html(formConfig.batteri_labels === 1 ? 'Yes' : 'No');

然而，显然，它在第一个.html()功能之后停止。

因此我的.config_shipper_label元素具有正确的值（是或否），但是，.config_batteri元素只是空的。

我有更多的元素，我需要经历，所以我怎样才能实现上述场景的最佳方式？

Answer 1

你不能像你那样把它链起来。您必须使用jQuery的end方法，如下所示：

$('.confirm-booking')
    .find('.config_shipper_label')
    .html(formConfig.shipper_labels === 1 ? 'Yes' : 'No')
    .end()
    .find('.config_batteri')
    .html(formConfig.batteri_labels === 1 ? 'Yes' : 'No');

Answer 2

鉴于它们与示例具有相同的逻辑，将其提取到函数：

var formConfig = {
  shipper_labels: 1,
  batteri_labels: 0
}

var doStuff = function(element, setting) {
  $('.confirm-booking')
    .find(element)
    .html(setting === 1 ? 'Yes' : 'No');
}

doStuff('.config_shipper_label', formConfig.shipper_labels);
doStuff('.config_batteri', formConfig.batteri_labels);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="confirm-booking">
  <div class="config_shipper_label">
  </div>
  <div class="config_batteri">
  </div>
</div>

jQuery - 多次使用.find（）和.html（）

2 个答案: