Jquery 读取每个div内元素的值

我有这段代码

$('.order_box').each(function(index) {
    box=$(this);
    if(box.find('.order_status').val()=="Payment received") { 
        box.css('color', 'red');
    }
});

它应该读取一组div中包含的select的值，并相应地对每个div应用css样式。div html是：

<div class="order_box">
<h1>Order nr.: 2329268704685016576</h1>
<div class="delivery_info">
    --
    <span class="titles">Status:
        <select class="order_status">
            <option class="payment_received" value="Payment received">Payment received</option>
            <option class="need_refund" value="Need to refund money">Need to refund money</option>
            <option class="waiting_stock" value="Waiting for product/s stock">Waiting for product/s stock</option>
            <option class="packing" value="Packing">Packing</option>
            <option class="delivered" value="Delivered/Done" selected="selected">Delivered/Done</option>
        </select>
    </span>
    --
</div>

订单号：2329268704685016576
--
地位：
收到的款项
需要退款吗
等待产品库存
包装
交付/完成
--

我假设我可能以错误的方式应用了每个函数，但是我当然不知道为什么。我希望知道我的用法有什么问题，因为这不是我第一次发现自己处于这种情况

    $('.order_box').each(function(index) {
        var box = $(this);
        if($('.order_status :selected', this).val() == "Payment received") {
           box.css('color', 'red');
        }
    })

---

编辑：示例。

现在您正在使用class.order\u框遍历所有元素。我假设您要检查.order\u status的值

if($('.order_status').val() == 'Payment received') {
    $('.order_box').css('color', 'red');
}

如果每个结果需要不同的规则，可以将其包装在一个开关中

switch($('order_status').val()) {
    case 'Payment received':
         $('.order_box').css('color', 'red');
         break;

    case 'Need to refund money':
         $('.order_box').css('color', 'green');
         break;

    // etc etc
}

---

我不明白您为什么要在这里使用$。每个。

您可以简化为：

$('.order_box').addClass(function(){
    return $(this).find('.order_status').val().trim().toLowerCase() == 'payment received' ? 'classNameIfMatch' : '';
});

使用

trim（）

从值中删除任何前导/尾随空格，并使用

toLowerCase（）

防止大写错误（在HTML或jQuery中）导致问题

有趣的是，这种方法比公认的答案更快/更有效：，不过请注意，我选择修改公认答案的代码，以便在这两种情况下设置相同的CSS属性

参考资料：

---

由于您的代码只取决于order_status类，因此不需要使用each函数

正确使用jQueryAPI

$(".order_status").change(function(){
if($(".order_status option:selected").val()=="Payment received") { 
$(this).attr('style','color:red;');
}else{
$(this).attr('style','color:black;');
}
});

检查此处已解决的问题：

---

我认为每一个都是因为将有多个

。订单箱

系统，因为不止一个。订单箱，如果我没有很好地表达我的问题，我很抱歉。：）但是谢谢你的切换技巧。听起来不错，小提琴缺少一个可以关闭第一个。订购盒，但这就像我一直在寻找的一样。非常感谢：）我将保存这个，我不太关心修剪/大小写问题，因为我确切知道值将这样写，但知道如何在需要时处理它真的很好。@Paprika:我很高兴能提供一些帮助，但请注意，您接受的答案是，比我自己的建议慢79%。谢谢你链接到JS Perf，这是一个非常方便和有用的工具（我不知道它的存在）。我无法想象使用您的代码可以如此高度地提高性能。我选择了实际接受的答案，因为这正是我所寻找的，但我认识到这种方法更聪明、更好看（考虑到它还检查大写字母问题/空白）。操作需要在document.ready（）上启动，而且在更改时，我仍然处于问题的第一部分。但是谢谢你，我仍然可以把这个改编成第二部分。