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

您可以循环每个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 2

包含文本值的属性只会使用选择器

<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);
})

Answer 3

一些问题

您的HTML的<p/>不是结束标记，而是打开新p元素的标记。您应该将其更改为</p>
当对象属性的优点是您可以直接访问它们而不进行循环时，循环遍历choices属性是浪费时间。所以跳过外部循环，在内部循环中找到对象值（不需要额外的循环）
使用纯文本时请勿使用.html()。有一个单独的方法：.text()。
$('.choice_result').find('span')将找到具有给定类的祖先的所有span标记。相反，您应该使用已使用each进行的选择的当前上下文。 jQuery将this设置为匹配的元素，使用next，您可以找到下一个兄弟。
您可以使用$(selector).each(...)代替$.each($(selector),...)，我认为这更具有可读性。

这是一个完成这项工作的版本：

＆＃13;

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]);
    }
});

＆＃13;

<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>

＆＃13;

尝试迭代key，val字典，并将键与另一个for循环匹配

3 个答案: