Как ссылаться на объекты по $ (". 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> 

Здесь, когда я печатаю # в консоли я получаю „нулевой“ вне.

Однако, когда я типа, например,

$('.bodyDiv.brdPalette.brandPrimaryBrd') 

я выберусь элемент:

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

(Этот ДИВ не включен в вышеуказанном источнике, но это один из первый (как минимум с отступом) DIVS на странице.

Я также попытался 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.) Длина + $ (' dataRow.even.) Длина не будет работать (.. потому что $ ('dataRow.odd') возвращает null)

Спасибо за ответы. Извините, если мой ответ был неясным раньше - все еще довольно новый.

Спасибо!

Answer 1

Я хотел бы вернуть массив всех предметов, принадлежащих классу dataRow odd.

Пожалуйста, обратите внимание, что из-за класс является маркером список пробельные-разделителями, dataRow odd фактически два класса, один dataRow и другой odd.

Объедините это знание назад с CSS селекторов и вы поймете, что самый простой способ, чтобы выбрать один элемент с обоими из этих классов заключается в использовании

.dataRow.odd 

который будет соответствовать

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

Также обратите внимание, что node.getElementsByClassName не принимает Селектор, но вместо этого String, который представляет собой список токенов класса с разделителями пробелов. Если вы хотите использовать селектор в ванили JavaScript то методы, которые вы бы искали в node.querySelector или node.querySelectorAll

Кроме того, в результате этих методов будут первое соответствие элемента (или нуль) и NodeList (или HTMLCollection), соответственно. Чтобы преобразовать NodeList в массив, вы можете выполнить следующие действия

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

Answer 2

Попробуйте это. Создайте массив (элементы в примере). Перебирайте каждый элемент с именем класса и массивом push-elements.

var elements = []; 

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

Ваш недостающий «.» На $ ('. DataRow odd') в вашем примере кода. Также существует разница между выбором дочерних элементов и элементами muti-class.

Детского

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

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

Муть класс

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

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