getElementsByClassName и AJAX - PullRequest
Новая
       10

getElementsByClassName и AJAX

2 голосов
/ 22 февраля 2012

Я что-то упустил с getElementsByClassName () и querySelectorAll ()?

В Firefox 9 и Chrome 17 и, вероятно, во всех браузерах кажется, что обе эти функции возвращают пустой массив при выполнении в ответе AJAX. См. Следующую ссылку для примера.

http://jsfiddle.net/r8ryr/5/

Я могу вызвать document.getElementsByClassName ('findme') или anyElement.getElementsByClassName ('findme') для любого элемента в DOM текущей страницы, но по какой-то причине он не работает на возвращенном XML-документе для запроса AJAX. Обратите внимание, что getElementsByTagName работает для AJAX, и в Firebug вы можете видеть, что элементы имеют класс «findme». 

var inMem = document.createElement('div');
var findme1 = document.createElement('div');
var findme2 = document.createElement('div');
findme1.className = 'findme';
findme2.className = 'findme';
inMem.appendChild( findme1 );
inMem.appendChild( findme2 );

$('#inMem').html( 'found ' + inMem.getElementsByTagName('div').length + 
            ' divs in the detached div<br/>' +
        'found ' + inMem.getElementsByClassName('findme').length + 
            ' findme elements by ClassName<br/>' +
        'found ' + inMem.querySelectorAll('.findme').length + 
            ' findme elements using querySelectorAll()');


var inDoc = document.getElementById('inDoc');
inDoc.innerHTML = 'found ' + inDoc.getElementsByTagName('div').length + 
            ' divs in the doc<br/>' +
        'found ' + inDoc.getElementsByClassName('findme').length + 
            ' findme elements by ClassName<br/>' +
        'found ' + inDoc.querySelectorAll('.findme').length + 
            ' findme elements using querySelectorAll()';


$.post( '/echo/xml/', 
    {xml:'<div id="wrapper"><div class="findme" id="findme1">findme 1</div><div class="findme">findme 2</div></div>'},
    function(data, textStatus, jqXHR) {
        data = jqXHR.responseXML.documentElement;
        var msg = 'found ' + data.getElementsByTagName('div').length + 
                ' divs in the AJAX response, <br/>' +
            'found ' + data.getElementsByClassName('findme').length + 
                ' findme elements by ClassName<br/>' +
            'found ' + data.querySelectorAll('.findme').length + 
                ' findme elements using querySelectorAll()<br/>' +
            'The class name of the first div: ' + data.firstElementChild.className + 
                ' (className) or ' + data.firstElementChild.attributes['class'].value + ' (attributes["class"].value)';

        $('#ajax').html(msg);
    }
);



<h2>In-Memory</h2>
<div id="inMem"></div>

<h2>In HTML Document</h2>
<div id="inDoc">
  <div class="findme"></div>
  <div class="findme"></div>
</div>

<h2>AJAX XML Response</h2>
<div id="ajax">wait...</div>

1 Ответ

1 голос
/ 22 февраля 2012

Поскольку вы работаете с документом xml, стандартные методы DOM, работающие с атрибутами, не применяются. Один из вариантов - использовать XPath, например: 

data.evaluate("count(//div[@class='findme'])", data.documentElement, null, XPathResult.NUMBER_TYPE, null).numberValue

В вашем коде: 

$.post( '/echo/xml/', 
    {xml:'<div id="wrapper"><div class="findme" id="findme1">findme 1</div><div class="findme">findme 2</div></div>'},
    function(data, textStatus, jqXHR) {
        data = jqXHR.responseXML;
        var msg = 'found ' + data.getElementsByTagName('div').length + ' divs in the AJAX response, <br/>' + 
                  'found ' + data.evaluate("count(//div[@class='findme'])", data.documentElement, null, XPathResult.NUMBER_TYPE, null).numberValue + ' findme elements by ClassName<br/>'

        $('#ajax').html(msg);
    }
);

Но может быть проще конвертировать из XML или использовать Sizzle. Поскольку вы используете jQuery в другом месте, вы можете просто сделать $(jqXHR.responseXML.documentElement).find('.findme').length.

...