Question

我正在尝试在网页上获取属于某个类的对象数组。

这是我第一次使用JQuery和JS进行的实验，所以请理解。

我想返回属于班级dataRow odd的所有项目的数组。

目前我正在尝试$('.dataRow odd')和$('.dataRow.odd')，如here.和here.

对于某些外部类，此方法似乎有效，我可以获取该元素。一旦我进入一个更深入的（更多缩进），它就不会。

这是我正在尝试访问的表的html：

    <div class="listRelatedObject caseBlock">
<div class="bPageBlock brandSecondaryBrd secondaryPalette">
    <form action="/p/case/CaseMassAction?retURL=%2F500%3Fisdtp%3Dlt%26fcf%3D00BE0000003Suuk&amp;ent=Case&amp;from=&amp;isdtp=lt" id="actionForm" method="POST" name="actionForm" onsubmit="return verifyChecked(actionForm, 'ids', 'Please select at least one row')" target="mainFrame">
            <input type="hidden" name="isdtp" id="isdtp" value="mn">
            <input type="hidden" name="retURL" id="retURL" value="/500?isdtp=lt&amp;fcf=00BE0000003Suuk">
        <div class="pbHeader">
            <div class="listHeader">...</div>
        </div>
        <div class="pbBody">
            <table class="list" border="0" cellspacing="0" cellpadding="0">
                <tbody>
                    <tr class="headerRow">...</tr>
                    <!-- ListRow -->
                    <tr class="dataRow even first bRowHilight" id="row_500E000000B8LgY" onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onmouseover="if (window.hiOn){hiOn(this);}">...</tr>
                    <!-- ListRow -->
                    <tr class="dataRow odd" id="row_500E000000B77FP" onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onmouseover="if (window.hiOn){hiOn(this);}">...</tr>
                    <!-- ListRow -->
                    <tr class="dataRow even" id="row_500E000000B8NHk" onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onmouseover="if (window.hiOn){hiOn(this);}">...</tr>
                    <!-- ListRow -->
                    <tr class="dataRow odd last" id="row_500E000000B7TIG" onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}" onmouseout="if (window.hiOff){hiOff(this);}" onmouseover="if (window.hiOn){hiOn(this);}">...</tr>
                </tbody>
            </table>
        </div>
    </form>
</div>

这里，当我在控制台中键入＃（'。className'）时，我得到“null”。

然而，当我输入时，例如，

$('.bodyDiv.brdPalette.brandPrimaryBrd')

我拿出了元素：

<div class="bodyDiv brdPalette brandPrimaryBrd">...</div>

（此div不包含在上面的源代码中，但它是页面上第一个（最少缩进的）div之一。

我也尝试了getElementsByClassName(".dataRow.odd")和getElementsByClassName(".dataRow odd")，但这些都没有。

$('.myClass')选择器不应该有效吗？

我的目标是编写一个将运行的脚本并告诉我表中存在多少行。到目前为止我有这个：

    // ==UserScript==
    // @name       SalesForce JS to AutoRefresh
    // @version    0.1
    // @match      https://na9.salesforce.com/ui/desktop/DesktopPage
    // @copyright  2012+, You
    // ==/UserScript==

    var time = new Date().getTime();

    var numCases = $('.dataRow.odd').length + $('.dataRow.even').length;

    function refresh() 
    {
        console.log("Inside Function");
        if(new Date().getTime() - time >= 10000) 
        {
               time = new Date().getTime();
               freshImage.click();
               console.log("Refreshed");
               console.log("num Cases = " + numCases);
               if($('.dataRow.odd').length + $('.dataRow.even').length > numCases)
               {
                   while(numCases-- > $('.dataRow.odd').length + $('.dataRow.even').length)
                       beep(100,0);
                }
         }
         setTimeout(refresh, 1000);
    }

    var beep = (function () { .... /*beeps*/})();

    setTimeout(refresh, 1000);

我认为一切正常，除此之外 $（'。dataRow.odd'）。length + $（'。dataRow.even'）。length 不起作用（因为$（'dataRow.odd'）返回null）

感谢目前为止的回复。对不起，如果我之前的答案不清楚 - 还是很新的。

谢谢！

Answer 1

我想返回属于班级dataRow odd的所有项目的数组。

请注意，因为 class 是以空格分隔的标记列表，dataRow odd实际上是两个类，一个是dataRow，另一个是odd {1}}。

将此知识与 CSS选择器结合起来，您将意识到选择单个元素的最简单方法是使用这两个类

.dataRow.odd

将匹配

<span class="dataRow odd"></span>
<span class="odd dataRow"></span>
<span class="foo odd bar dataRow baz"></span>

另请注意，node.getElementsByClassName不会使用选择器，而是使用 String ，这是一个以空格分隔的类令牌列表。如果您希望在vanilla JavaScript 中使用选择器，那么您要查找的方法是node.querySelector或node.querySelectorAll

此外，这些方法的结果将分别是第一个匹配的元素（或null）和 NodeList（或HTMLCollection）。要将 NodeList 转换为数组，您可以执行以下操作

var array = Array.prototype.slice.call(nodeList);

Answer 2

试试这个。创建一个数组（示例中的元素）。使用类名循环遍历每个元素并推送到elements数组。

var elements = [];

$('.dataRow.odd').each(function(){
     elements.push($(this));
}):

您在示例代码中错过了$（'。dataRow odd'）上的“。”。选择子元素和多元素元素之间的区别。

子

$('.dataRow .odd'); (space include here)

<div class="dataRow">
   <div class="odd"></div>
</div>

穆蒂级

$('.dataRow.odd'); (no space)

<div class="dataRow odd">
</div>

如何通过$（“。className”）引用对象？

2 个答案: