試圖通過關鍵，VAL字典迭代，並與另一匹配鍵循環

Question

我有鑰匙，VAL dict這樣的：

choices = {'first': 1, 'second': 2, 'third': 3} 

然後，像這樣一組的div：

<div class="choice_result"> 
    <p class="choice_result_text">first<p/> 
    <span></span> 
</div> 

<div class="choice_result"> 
    <p class="choice_result_text">second<p/> 
    <span></span> 
</div> 

<div class="choice_result"> 
    <p class="choice_result_text">third<p/> 
    <span></span> 
</div> 

我想遍歷每個.choice_result_text，如果這.choice_result_text == key，我想要將該span的html更改爲val。現在，我的jQuery代碼（在Ajax成功功能）看起來是這樣的：

result = $('.choice_result_text'); 

$.each(data.choices, function (key, val) { 
      $.each(result, function() { 
       if(result.html() == key) { 
        j = $('.choice_result').find('span').html(key); 
        j.html(val); 
       } 
      }) 
     }); 

眼下，這個代碼變成每span在選擇第一val（1）。任何想法如何使其正常工作？

Answer 1

一些問題

• 你的HTML有<p/>這不是一個結束標記，但打開一個新的p元素的標籤。您應該將其更改爲</p>

• 當對象屬性的優點是您可以直接訪問它們而無需循環時，循環使用choices屬性是浪費時間。因此，跳過外部循環，並找到內部循環內的對象值（不需要額外的循環）。

• 當您使用純文本時，不要使用.html()。有一個單獨的方法：.text()。

• $('.choice_result').find('span')將找到所有具有給定類的祖先的span標籤。相反，您應該使用each已經完成的選擇的當前上下文。 jQuery將this設置爲匹配的元素，並且使用next可以找到下一個兄弟。

• 您可以使用$(selector).each(...)而不是$.each($(selector),...)這在我看來更具可讀性。

這裏是一個版本，沒有工作：

var choices = { first: 1, second: 2, third: 3 }; 
 

 
$('.choice_result_text').each(function() { 
 
    var key = $(this).text(); 
 
    if (key in choices) { 
 
     $(this).next('span').text(choices[key]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="choice_result"> 
 
    <p class="choice_result_text">first</p> 
 
    <span></span> 
 
</div> 
 

 
<div class="choice_result"> 
 
    <p class="choice_result_text">second</p> 
 
    <span></span> 
 
</div> 
 

 
<div class="choice_result"> 
 
    <p class="choice_result_text">third</p> 
 
    <span></span> 
 
</div>

Answer 2

你也可以遍歷每個div，檢查對象爲p文本與hasOwnProperty鍵，然後將其值增加span

var choices = { 
 
    first: 1, 
 
    second: 2, 
 
    third: 3 
 
} 
 
$('.choice_result').each(function() { 
 
    var text = $(this).find('p').text().trim() 
 

 
    if (choices.hasOwnProperty(text)) { 
 
    $(this).find('span').html(choices[text]) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="choice_result"> 
 
    <p class="choice_result_text">first<p/> 
 
    <span></span> 
 
</div> 
 

 
<div class="choice_result"> 
 
    <p class="choice_result_text">second<p/> 
 
    <span></span> 
 
</div> 
 

 
<div class="choice_result"> 
 
    <p class="choice_result_text">third<p/> 
 
    <span></span> 
 
</div>

Answer 3

包含文本值將成爲一個屬性這非常簡單使用選擇器只有

<div class="choice_result"> 
    <p class="choice_result_text" data-text="first">first<p/> 
    <span></span> 
</div> 

個

JS

$.each(choices, function(key, val){ 
    $('.choice_result_text[data-text="' + key + '"]').next().text(val); 
})