Селектор jQuery пропускает элементы из отдельного контекста - PullRequest
Новая
       4

Селектор jQuery пропускает элементы из отдельного контекста

0 голосов
/ 10 мая 2018

Я делаю ajax-запрос к странице на моем сайте с этим элементом как прямым потомком тега body: 

<div class="container" id="wantme"><div class="content"></div></div>

Есть только один .container, и я хочу получить его ID, который я не знаю.

Насколько я могу судить, этот код должен делать то, что я хочу: 

$.get('/page', function(data) {
    id = $('.container', data).attr('id');
});

Но селектор .container не может ничего найти.

Я нашел эти два обходных пути. Я могу найти .content и взобраться на дерево вот так: 

id = $('.content', data).parent().attr('id');

Но я не могу прыгнуть прямо туда.

Я нашел этот обходной путь в другом месте в StackOverflow, который работает: 

html = $('<div></div>').html(data);
id = html.find('.container').attr('id');

Но почему на первый взгляд очевидный ответ не работает?

Ответы [ 2 ]

0 голосов
/ 10 мая 2018

ОБНОВЛЕННЫЙ ОТВЕТ: Я оставлю свой исходный ответ внизу, однако меня беспокоит, что в зависимости от браузера он может работать некорректно. .html() в jQuery использует innerHTML Javascript - некоторые браузеры выбирают теги <head> и <body> при использовании innerHTML, а другие нет.

Самым безопасным способом достижения того, что вам нужно, может быть обходной путь, о котором вы упоминали, например: 

var data = '<!doctype html><html><body><div class="container" id="findme"><div class="content"></div></div></body></html>';

var $container = $("<div />").html(data).find(".container");
var id = $container.attr("id");

console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Более подробную информацию о проблемах, связанных с браузером можно найти здесь .

ПРЕДЫДУЩИЙ ОТВЕТ:

Когда вы передаете HTML элементу jQuery, он игнорирует теги <body>, а также все, что за пределами из них. Учитывая строку данных в вашем JSFiddle, $(data) создаст что-то похожее на это: 

<div class="container" id="findme">
    <div class="content"></div>
</div>

Как вы можете видеть в HTML выше, ваш .container не внутри из $(data) - он равен $(data).

Поскольку $(data) представляет ваш элемент .container, вы просто должны иметь возможность $(data).attr("id") получить то, что вы ищете. 

var data = '<!doctype html><html><body><div class="container" id="findme"><div class="content"></div></div></body></html>';
var id = $(data).attr('id');
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0 голосов
/ 10 мая 2018

Вы не получаете идентификатор от $('.container', data).attr('id');, потому что вы устанавливаете значение второго параметра.Что вы хотите сделать, это: $('.container ' + data).attr('id');.

Обновление: если данные являются строкой, то вы должны преобразовать их в элемент DOM: $('.container', $(data)).attr('id');

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...