试图通过关键，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); 
})