How to reference objects by $(".className")?

Question

I am trying to get an array of objects belonging to a certain class on a webpage.

This is my very first experiment with JQuery and JS, so please be understanding.

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

Currently I am trying $('.dataRow odd') and $('.dataRow.odd') as seen here. and here.

For some of the outer classes, this method seems to work, and I can get the element. As soon as I get into one that is further in (more indented), it won't.

This is the html of the table that I'm trying to access:

    <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>

Here, when I type #('.className') in the console I get "null" out.

However, when I type in, for example,

$('.bodyDiv.brdPalette.brandPrimaryBrd')

I get out the element:

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

(This div is not included in the source above, but it is one of the first (least indented) divs on the page.

I have also tried getElementsByClassName(".dataRow.odd") and getElementsByClassName(".dataRow odd") but neither of these work.

Is there any reason that the $('.myClass') selector should not work?

My goal is to write a script that will run and tell me how many rows exist in the table. I have this so far:

    // ==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);

I think everything is working, except that $('.dataRow.odd').length + $('.dataRow.even').length will not work (because $('dataRow.odd') returns null)

Thanks for the responses so far. Sorry if my answer wasn't clear before--still pretty new to this.

Thanks!

And what does the element look like, you're sure you're not just looking for $('.dataRow .odd') — adeneo
– adeneo, Commented May 7, 2014 at 0:04
In vanilla-js, use document.querySelectorAll(".dataRow.odd") or document.getElementsByClassName("dataRow odd"). In jQuery, use $('.dataRow.odd') — Oriol
– Oriol, Commented May 7, 2014 at 0:04
$('.dataRow.odd') should do what you want. Can you elaborate on this: "For some of the parent classes, this method seems to work, and I can get the element. As soon as I get into an ancestor it will not work." — jraede
– jraede, Commented May 7, 2014 at 0:05
@cookiemonster - It should be document.getElementsByClassName("dataRow odd"). That is the correct syntax; getElementsByClassName only has one parameter. (MDN) — Derek 朕會功夫
– Derek 朕會功夫, Commented May 7, 2014 at 0:16

Paul S. · Accepted Answer · 2014-05-07 00:16:23Z

1

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

Please notice that because class is a whitespace-delimited token list, dataRow odd is actually two classes, one dataRow and the other odd.

Combine this knowledge back with CSS Selectors and you'll realise the easiest way to select a single Element with both of these classes is to use

.dataRow.odd

which will match

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

Notice also that node.getElementsByClassName doesn't take a Selector, but instead a String which is a whitespace-delimited class token list. If you wish to use a selector in vanilla JavaScript then the methods you'd be looking for are node.querySelector or node.querySelectorAll

Further, the result of these methods will be the first matching Element (or null) and a NodeList (or HTMLCollection), respectively. To convert a NodeList into an Array, you can perform the following

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

edited May 7, 2014 at 0:16

answered May 7, 2014 at 0:05

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

adeneo Over a year ago

Yet the question states the OP has tried $('.dataRow.odd')

adeneo Over a year ago

And following that statement it says As soon as I get into an ancestor it will not work

user3204720 Over a year ago

Hi @PaulS., I've tried both of these, but I'm still getting out "null" when I type them into the console. Is there a reason I might have to use an inner node instead of document.querySelectorAll("dataRow odd")?

user3204720 Over a year ago

I marked this as the answer, even though it didn't work for me, because it should have worked with the information I provided. The problem was that the class was referenced inside of an iframe. In order to get the $('.className') to work, I had to jquerify the webpage, and then get the iframe with $("#iframeID"), use the .contents() method to get the stuff inside the iframe, and then find(".dataRow") to get the elements I was looking for. Thanks everyone for the answers. Sorry I didn't provide enough details, I just wasn't sure where to add information, or that an iframe was the problem.

Donald Powell · Accepted Answer · 2014-05-07 00:43:51Z

0

Try this. Create an array (elements in example). Loop through each element with the class name and push to elements array.

var elements = [];

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

Your missing the " . " on $('.dataRow odd') in your example code. Also the difference between selecting child elements and muti-class elements.

Child

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

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

Muti-class

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

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

edited May 7, 2014 at 0:43

answered May 7, 2014 at 0:32

Donald Powell

7745 silver badges10 bronze badges

3 Comments

user3204720 Over a year ago

Hi @DonaldPowell. Thanks very much for your answer. I'm still having difficulty though, not because the function isn't working, I think, but because it's not returning any objects belonging to the class. Do you think there's a reason $('dataRow.odd') might not be finding my elements?

Donald Powell Over a year ago

Comment above shows $('dataRow.odd'). I believe you want $('.dataRow.odd'). You want an period(".") before any class name and an hash/pound ("#") before id names. Try $('.dataRow.odd').

user3204720 Over a year ago

Thanks @DonaldPowell, but still no luck :/

Collectives™ on Stack Overflow

How to reference objects by $(".className")?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related