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

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元素具有正確的值（Yes或No），但是，我的.config_batteri元素只是空的。

我有更多的元素，我需要通過，所以我如何才能實現上述方案的最佳方式？

Answer 1

由於它們具有相同的邏輯作爲例子，它解壓到一個功能：

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>

Answer 2

你不能像你所做的那樣鏈接它。您必須使用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');