$('div[class^="ii gt"]') 适用于 chrome 而不是 firefox？答案

【问题标题】：$('div[class^="ii gt"]') works in chrome not firefox?$('div[class^="ii gt"]') 适用于 chrome 而不是 firefox？
【发布时间】：2014-10-18 09:47:21
【问题描述】：

我正在开发一个 Firefox 扩展。在 Google Chrome 中，我通过以下方式获取元素：
var element = $('div[class^="ii gt"]')
它返回一个对象。然后我使用element[0].children[0] 获取第一个元素的第一个子元素，它工作正常。

但在 Firefox 中，使用上述代码在同一 HTML 页面上返回一个对象，但该对象不包含任何子元素。我还检查了长度为 0。此外，我尝试了 $("*[class^='ii gt']") and $("*[class*='ii gt']")，它们都返回 0 长度。

有什么问题？怎么解决？

注意：<div> 的类包含动态前缀名称，例如“ii gt aaa”和“ii gt bbb”。

更新：我只是尝试使用document.getElementsByClassName('ii gt m1485f8bb9d512968 adP adO')[0].innerHTML 来使用整个类名。它不起作用。但是使用content.document.getElementsByClassName('ii gt m1485f8bb9d512968 adP adO')[0].innerHTML 它起作用了。那么问题是什么？有人知道吗？

【问题讨论】：

你能给我们看看html标记吗？它似乎在 Firefox 中工作：jsfiddle.net/3o287520
你的 Firefox 代码是在什么上下文中执行的？
@paa :Gmail 收件箱邮件上下文。
通过 cintext 我的意思是如果代码是内容脚本的一部分，或者main.js 或其他东西。
从更新来看，您的扩展是 XUL 扩展。您的代码在 ChromeWindow 的内容中执行，这就是为什么您必须使用 content 来访问 HTMLWindow。

标签： javascript jquery firefox google-chrome-extension firefox-addon

【解决方案1】：

您可以使用$(".ii.gt")。这将选择具有这两个类的所有元素，并且比使用正则表达式作为选择器要快得多（prop^=* 是通过正则表达式）。

类的顺序无关紧要，这会使代码变得非常困难。试想一下，一年后你回来，添加一个类，然后一切都停止工作，只是添加类？

【讨论】：

感谢 Martijn。但它不起作用。我试过 var getclass= $(".ii.gt");和 var classelement = getclass[0];。但它在 firefox 中返回 null。
我只是尝试使用整个类名 document.getElementsByClassName('ii gt m1485f8bb9d512968 adP adO')[0].innerHTML.it not works.but using content.document.getElementsByClassName('ii gt m1485f8bb9d512968 adP adO')[0].innerHTML 它可以工作。那么问题是什么？
我不知道getElementsByClassName 是否参加多个课程。在这种情况下你想要querySelector。

【解决方案2】：

也许使用过滤效果更好？

// selector
$('[data-result=1]')
  .html('length children div.ii.gt*: '
        + $('div').filter( 
             function (i, el) {return /^ii gt/i.test(el.className);})
          .children().length);

[data-result] {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>some div</div>

<div class="ii gtsomething">
   <div>child div.ii.gt</div>
   <div>second child div.ii.gt</div>
</div>

<div data-result="1"></div>

【讨论】：

@Kooilnc : 查看我更新的问题。如何使用类前缀名称获取 XUL 元素？

【解决方案3】：

这里我已经解决了我的问题。谢谢你们。

var getDocument = content.document;

var composeDecrypt = $(getDocument).find('div[class^="ii gt"]');

var originalContent = composeDecrypt[0].children[0].innerHTML;

【讨论】：