jQuery Ajax Call - Получение первого дочернего элемента тега Body
Это интересный вопрос, и я хочу услышать все ваши мнения по нему.
Ajax-вызов jQuery удаляет следующие теги:
<html>, <head>, <body> etc.
Вы не можете получить к ним доступ через данные. Например:
$.ajax({
async: 'false',
dataType: 'html',
type 'GET',
url: '/hello.html',
success: function (data) {
$(data).find('body'); //would be undefined
}
});
Вы также не можете получить доступ к первому дочернему элементу внутри этих элементов. Например:
<body>
<div id="cantTouchThis"> <!-- Not found -->
<div class="orThis"></div>
</div>
</body>
Я читал в Интернете, что parseHTML (jQuery 1.8+) может решить эту проблему. Это нормально, но что, если пользователь не может использовать jQuery выше 1.7.0?
Я прочитал много решений, говорящих, что дополнительный элемент вокруг тега body или внутри него также работает. Я чувствую, что этот подход не очень хорош, так как вы добавляете дополнительный HTML.
Я также видел, как люди используют регулярное выражение / замену этих элементов. Это лучше, но все равно влияет на HTML.
Наконец, я знаю о фильтре. Это нормально, если вы знаете точный элемент, но если вы не знаете, может быть использован другой элемент. Фильтр не сможет найти его, если это не дочерний элемент:
$(data).filter(‘#cantTouchThis'); //Found
$(data).filter(‘.orThis'); //Not found
Одним интересным решением было createDocumentFragment (). Узнайте больше об этом на этой странице где-то: http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/.
Этот тип кодирования предназначен для повышения производительности сайта. На сайте выше есть отличный пример.
Исходя из этого, я прочитал, что вы можете сделать это:
$.ajax({
async: 'false',
dataType: 'html',
type 'GET',
url: '/hello.html',
success: function (data) {
var data = $(data),
frag = document.createDocumentFragment();
frag.appendChild($data[0]); //appends nothing
$(frag).find('#cantTouchThis'); //finds nothing
}
});
Однако это не сработало: как мне отфильтровать тело html возвращаемых данных из ajax?
Затем я взглянул на это дальше.
$.ajax({
async: 'false',
dataType: 'html',
type 'GET',
url: '/hello.html',
success: function (data) {
var data = $(data),
frag = document.createDocumentFragment(),
$frag;
for (var i = 0; i < $data.length; i += 1) {
frag.appendChild($data[i]); //Appends the data to the fragment
}
$frag = $(frag);
$frag.find('#cantTouchThis'); //still finds nothing, find does not work
$frag.children('#cantTouchThis'); //finds it
$frag.children('.orThis'); // not found
$frag.children('#cantTouchThis').find('.orThis'); //finds it
}
});
Наконец я немного расширил это:
$.ajax({
async: 'false',
dataType: 'html',
type 'GET',
url: '/hello.html',
success: function (data) {
var data = $(data),
frag = document.createDocumentFragment(),
$frag,
$dataWrap = document.createElement('div'); //Create a div
$dataWrap.setAttribute('id', 'ajaxContent'); //set an attr
frag.appendChild($dataWrap); //append it into the dataWrap
for (var i = 0; i < $data.length; i += 1) {
frag.getElementById('ajaxContent').appendChild($data[i]); //Appends the data to the fragment child
}
$frag = $(frag).children(); //Targets ajaxContent and then you can target everything else
$frag.find('#cantTouchThis'); //finds it
$frag.find('.orThis'); //finds it this time!
}
});
Это плохой подход? Это немного тяжелый JS, и я не уверен, что это хорошее решение. Будет ли это сделать его медленнее (для цикла данных) или поможет ускорить его.
Есть ли способ доступа к тегам тела без обновления jQuery.
Мне любопытно мнение каждого. Я надеюсь, что ничего не пропустил.
РЕДАКТИРОВАТЬ:
Оказывается, Internet Explorer не любит getElementById для самого фрагмента.
Вы можете обойти это, используя следующее:
for (var i = 0; i < $data.length; i += 1) {
frag.firstChild.appendChild($data[i]); //firstChild works
}
Спасибо, что прочитали это.