Javascript 尝试迭代键、val字典,并将该键与另一个for循环匹配
我有一把钥匙,valJavascript 尝试迭代键、val字典,并将该键与另一个for循环匹配,javascript,jquery,Javascript,Jquery,我有一把钥匙,valdict像这样: choices = {'first': 1, 'second': 2, 'third': 3} <div class="choice_result"> <p class="choice_result_text">first<p/> <span></span> </div> <div class="choice_result"> <p clas
dict
像这样:
choices = {'first': 1, 'second': 2, 'third': 3}
<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>
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);
}
})
});
然后是一组如下所示的div:
choices = {'first': 1, 'second': 2, 'third': 3}
<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>
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
)。知道如何使其正常工作吗?您可以循环每个div
,检查对象是否将p
的文本作为键,并使用hasOwnProperty
将其值添加到span
var选项={
第一:1,,
二:二,,
第三:3
}
$('.choice_result')。每个(函数(){
var text=$(this.find('p').text().trim()
if(choices.hasOwnProperty(text)){
$(this.find('span').html(选项[文本])
}
})
首先
第二个
第三个
一个包含文本值的属性只需使用选择器就可以使这一过程变得非常简单
<div class="choice_result">
<p class="choice_result_text" data-text="first">first<p/>
<span></span>
</div>
一些问题
- HTML中的
不是结束标记,而是打开新
元素的标记。您应该将其更改为p
- 循环查看
属性是浪费时间的,而对象属性的优点是您可以直接访问它们,而无需循环。因此,跳过外部循环,在内部循环中查找对象值(无需额外循环)选项
- 使用纯文本时不要使用
。有一个单独的方法:.html()
.text()
将查找具有给定类祖先的所有$('.choice_result').find('span')
标记。相反,您应该使用已使用span
进行选择的当前上下文。jQuery将每个
设置为匹配的元素,使用this
可以找到下一个同级元素next
- 您可以使用
而不是$(选择器)。each(…)
,在我看来,这更具可读性$。each($(选择器),…)
var-choices={first:1,second:2,third:3};
$('.choice\u result\u text')。每个(函数(){
var key=$(this.text();
如果(输入选项){
$(this).next('span').text(选项[key]);
}
});代码>
首先
第二个
第三
为什么不在标签中使用带有选项键的id呢?
?不确定您的意思。first
。例如,div是动态创建的。我只是把第一,第二,第三放在那里作为占位符。谢谢,这是最好的答案。但是,您是否可以帮助对jQuery代码进行一些轻微的调整。我的choices
现在是这样的列表元组:choices=[('first',1),('second',2),('third',3),('fourth',4)
。我尝试过这样做,但无法获取。JavaScript没有元组,只有数组。您在此处为选项提供的值在JavaScript中是无效的语法。对。我询问的原因是因为我正在尝试根据其值(按降序)对字典进行排序。那么您知道如何对原始词典执行此操作吗?如果您可以假设ES6支持,那么choices=new Map;choices.set('first',1);
将保持插入顺序,并且仍然允许您通过键直接访问:choices.get('first')==1
。或者,您可以使用嵌套数组:choices=['first',1],['second',2],…]
,但是您没有直接访问权限,需要通过数组的第一个值迭代找到一个对。注意:映射和这些对数组很容易相互转换。但是如果您对此有疑问,最好将其作为新问题发布。