Jquery 属性选择器不跨浏览器？答案

【问题标题】：Jquery Attribute selector not cross browser?Jquery 属性选择器不跨浏览器？
【发布时间】：2012-10-26 16:55:21
【问题描述】：

我得到了以下脚本：

$('.jcarousel li .views-field-title').each(function(index) {
    //alert(index+1 + ': ' + $(this).text());
    var idx=index+1;
    $('.jcarousel-navigation li[jcarousel-page='+idx+'] a').html($(this).text());
});

这在 FF、IE7/8/9 中很有效，但在 Chrome 和 Safari 上却不行。

我知道这是因为属性选择器。

有人知道如何使这个脚本跨浏览器兼容吗？这似乎是我唯一需要做的事情。

【问题讨论】：

您也可以发布您的 HTML 吗？
试着把 li 和 .views-field-title 之间的空间去掉，这样它就是 li.views-field-title
您是否尝试过使用真实有效的 HTML 属性，例如 data-jcarousel-page ？
@adeneo：你是什么意思？我的 jcarousel 来自 Drupal。无法更改标记。
做了一个快速测试，对我来说它在 Chrome 中运行良好：jsfiddle.net/u6QLF/1

标签： jquery google-chrome cross-browser

【解决方案1】：

尝试用引号将实际值括起来，如下所示：

$('.jcarousel-navigation li[jcarousel-page="'+idx+'"] a')

【讨论】：

不带引号的属性选择器在 chrome 中工作得很好，这是别的东西

【解决方案2】：

尝试将idx 放在引号中：

$('.jcarousel-navigation li[jcarousel-page="'+idx+'"] a')

http://api.jquery.com/attribute-equals-selector/

【讨论】：

不带引号的属性选择器在 chrome 中工作得很好，这是别的东西

【解决方案3】：

您能否确认 .each 方法正在触发？

你试过去掉 li 和 .view-fields-title 之间的空格吗？

I.E

$('.jcarousel li.views-field-title').each(function(index) {
//alert(index+1 + ': ' + $(this).text());
var idx=index+1;
$('.jcarousel-navigation li[jcarousel-page='+idx+'] a').html($(this).text());

});

【讨论】：

注释警报是我的调试代码，用于确认 .each 方法正在触发。它有效。 jsfiddle.net/jJ8tc
仅在 jsfiddle 上，不在我的环境中。