javascript - 如何通过 $ (".className"引用对象？

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

I would like to return an array of all items belonging to the class dataRow odd.

请注意，由于class是一个以空格分隔的标记列表，dataRow odd实际上是两个类，一个dataRow 和另一个奇怪。

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

.dataRow.odd

将匹配

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

另请注意 node.getElementsByClassName不采用选择器，而是采用字符串，它是一个以空格分隔的类标记列表。如果您希望在普通 JavaScript 中使用选择器，那么您需要的方法是 node.querySelector或node.querySelectorAll

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

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