jquery $(this).attr(...) 返回未定义答案

【问题标题】：jquery $(this).attr(…) returns undefinedjquery $(this).attr(...) 返回未定义
【发布时间】：2012-01-18 22:16:34
【问题描述】：

我正在尝试获取 option 元素的标题，但它一直返回未定义。 $(this).attr("name")…和 $(this).attr("value") 也会发生这种情况，但奇怪的是 $(this).val() 有效（如预期的那样）。但是，我可以使用$(this).attr("value", "baz") 设置值。

小提琴：http://jsfiddle.net/jshado1/JgAJC/1/

【问题讨论】：

标签： javascript jquery find switch-statement

【解决方案1】：

this 指向<select> 元素。对于选定的选项，使用：

this.options[this.selectedIndex]

完整代码（您可以安全地打开 $opt 的 jquery 包装器，并使用 $opt.title 和 $opt.name，它们在所有浏览器中都是安全的）：

$('select').change(function() {
    var $opt = $(this.options[this.selectedIndex]),
        t = $opt.attr("title"),
        n = $opt.attr("name"),
        v = this.value;
    $("#name").text("name: "+n);
    $("#title").text("title: "+n);
    $("#value").text("value: "+v);
});

另一种方法，jQuery方式是：

$('select').change(function() {
    var $opt = $(this).children(':selected'),
        t = $opt.attr("title"),
        n = $opt.attr("name"),
        v = this.value;
    $("#name").text("name: "+n);
    $("#title").text("title: "+n);
    $("#value").text("value: "+v);
});

【讨论】：

这里是演示，顺便说一句：jsfiddle.net/JgAJC/5。我还将"title: "+n 替换为"title"+t，使其按预期工作。
哦，是的，我尝试发布更新的链接（我在发布后立即注意到），但 jsfiddle 不想更新。谢谢！效果很好！
非常酷的解决方案，但你明白为什么 $(this,">option :selected")..... 在这种情况下不起作用吗？
@sirlancelot $(this) 实际上并没有查询 dom...它只是将 this 框在 jquery 对象中。
@EvilP 因为您已经交换了选择器，并在option 和:selected 之间添加了一个空格。空格分隔子选择器，因此将其删除。此外，$(selector, context) 是正确的签名（相当于.find）。由于您使用的是>option，因此选择器等效于$(this).children('option:selected');。

【解决方案2】：

这是因为您弄错了代码中this 的含义。 this 表示已更改的 select 元素。因为选择节点没有title 属性，所以它是未定义的。您需要做的是枚举选择的选项列表并找到选中的项目。然后，您可以对该项目进行操作以查找如下信息：

 var element = $(this.options[this.selectedIndex]);

 element.attr('title');

【讨论】：