Jquery / javascript, фильтрация html-объекта из ответа ajax

#javascript #jquery #ajax #filter

#javascript #jquery #ajax #Фильтр

Вопрос:

У меня есть этот фрагмент html:

 <div id="1">
  <div class="text">
     Text for div 2 
  </div>
<img src="images/image1.jpg"></img>
</div>

<div id="2">
  <div class="text">
    Text in div 2
  </div>
  <img src="images/image2.jpg"></img>
</div>

Который я получаю с помощью простого .ajax-вызова

 var html = $.ajax({
         url: "htmlsnippet.html",
         cache: false,
         async: false,
         dataType: "html"
         }).responseText;

Если я отфильтрую его с:

 var htmlFiltered = $(html).filter("#1");

это работает просто отлично, я получаю весь div с id = «1»,

но если я использую:

 var htmlFiltered = $(html).filter("#1 .text");

переменная htmlFiltered является пустым объектом.
Я не могу понять, что я делаю не так.

Ответ №1:

Вы должны хранить его таким образом:

 $.ajax({
   url: "htmlsnippet.html",
   cache: false,
   async: false,
   dataType: "html",
   success: function(data){
      html = data;
   }
}

РЕДАКТИРОВАТЬ: Ваш способ получения html работает, но это не рекомендуется.
Вы не можете захватить свой последний элемент, потому что используете filter вместо find , поэтому у вас должно быть:

 var htmlFiltered = $(html).find("#1 .text");

вместо

 var htmlFiltered = $(html).filter("#1 .text");

Также W3C рекомендует не использовать числовые идентификаторы.

ПРАВКА 2: это должно сработать:

 var htmlFiltered = $(html).filter("#1").find(".text");

Надеюсь, это поможет. Приветствия

1. Извините, неправильно истолковал ваш ответ и удалил комментарий, но забыл убрать отрицательный отзыв. Исправлено сейчас.

2. Спасибо, Эдгар, но это не работает. Я переименовал divs и использовал ваш метод получения и хранения html, но . фильтр по-прежнему не захватывает никаких элементов, кроме пронумерованных divs. .find вообще не работает.

3. Большое спасибо! Это сработало. Ненавижу быть придирчивым, но не могли бы вы объяснить, как вы пришли к этому решению? Мне трудно понять, что происходит с html-объектом, как только я захватываю его с помощью Ajax и использую filter для него.

4. .фильтруйте только по выбранным вами узлам, не по их дочерним элементам, и . поиск выполняет opossite, поиск в дочерних элементах, а не в выбранных вами узлах. Итак, $(html). фильтр («#1 .текст»); был выбран неправильно, cause .text не является родительским, является дочерним. С помощью $(html). filter(«#1»).find(«.text»), мы фильтруем только родителей, которые имеют идентификатор 1, и его дочерних элементов, которые являются .text. Я надеюсь, что мое объяснение понятно

5. Да, я думаю, что понимаю. Таким образом, .text divs не являются частью набора, определенного html-объектом, являются только их родительские divs.

Ответ №2:

Если вам не нужна какая-либо специальная функциональность, предоставляемая полным $.ajax методом, вам следует $.load() попробовать:

Метод .load(), в отличие от $.get(), позволяет нам указать часть удаленного документа, которая должна быть вставлена. Это достигается с помощью специального синтаксиса для параметра url. Если в строку включен один или более символов пробела, предполагается, что часть строки, следующая за первым пробелом, является селектором jQuery, который определяет содержимое, подлежащее загрузке.

 $('#result').load('ajax/test.html #container');

http://api.jquery.com/load/#loading-page-fragments

Ответ №3:

Это работает для меня :

 $.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}