javascript - 在 jQuery 可枚举函数中操作 HTML5 数据值引发错误的案例

Question

标题看起来有点乱，我举个例子:

标记

<div id="MyDiv"></div>
<div id="SecondaryDiv"></div>

JS

// Set the HTML5 data key 'name' to value 'MyName'
$("#MyDiv").data("name", "MyName");

// Return all divs with the data key 'name' matching 'MyName'
//     This works without a hitch
$("div").filter(function () {
    return $(this).data("name") === "MyName";
});

// This breaks because I try to add '.toLowerCase()' to the end of the .data() function.
// The error returned is:
//     TypeError: $(...).data(...) is undefined
$("div").filter(function () {
    return $(this).data("name").toLowerCase() === "myname";
});

在比较 $(...).data(...) 值时如何忽略大小写？

作为旁注，即使我这样做:

// This throw an error saying:
//     TypeError: val is undefined
var val = "";
$("div").filter(function() {
    val = $(this).data("name");
    return val.toLowerCase() === "myname";
});

Answer 1

你不能在 undefined 上运行 .toLowerCase()，所以测试 .data('name') 的返回值首先是未定义的:

$("div").filter(function () {
    if ($(this).data("name")) {
        return $(this).data("name").toLowerCase() === "myname";
    } else {
        return false;
    };
});

http://jsfiddle.net/mblase75/yX4X2/

或更简洁:

$("div").filter(function () {
    return $(this).data("name") && ($(this).data("name").toLowerCase()==="myname");
});

http://jsfiddle.net/mblase75/yX4X2/1/

---

(但是，请注意 $(this).data("name") 可能会返回“假”值，例如 false 或 0，因为 .data() 尝试将字符串转换为适当的类型。参见 this question。)