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要素は正しい値（はいまたはいいえ）を持っていますが、私の.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');