выбор jquery в контексте объекта jQuery

Question

У меня есть на лету (не часть документа DOM) HTML-код.Что-то вроде -

<div class="media"> 
abc
</div>
<div class="media"> 
efg
</div>  
<div class="nvid">
   <div class="media">
qwr
   </div>    
</div>

, теперь я делаю jQuery obj для вышеупомянутого html, используя

jq = jQuery(above html);

, затем выбираю div, имеющий класс, как 'media', используясинтаксис-

jQuery('div.media', jq).each(console.log("found"));

сейчас, в идеале, я должен получить три «найденных», напечатанных в командной строке, но я получаю только один.какие-нибудь идеи, чего мне не хватает?

Answer 1

Вы должны передать функцию в .each, и вы могли бы лучше написать код в соответствии с этим, потому что он не подключен к DOM:

jq.filter(function(){ return $(this).hasClass('media') })
  .each(function() { console.log("found"); });

Answer 2

Отредактировано для ясности.

За кулисами, используя ядро ​​ jQuery (селектор, контекст) будет выполнять .find().Чтение документов в .find () говорит о том, что он будет искать дочерние элементы текущих элементов.

Это означает, что ваш звонок будет выполнять следующее:

Возьмите <div class="media">abc</div> детей - 0 детей - и найдите .media 0 результатов.

Возьмите <div class="media">efg</div> детей - 0 детей - и найдите .media 0 результатов.

Возьмите <div class="nvid">qwr</div> детей - 0 детей - и найдите .media 0 результатов.

Чтобы сделать это DOM-способом, оберните его в div и найдите:

var html = '<div class="media">abc</div>' + 
           '<div class="media">efg</div>' +
           '<div class="nvid">qwr</div>';
var obj = $(html);
//this fails:
$('div.media',obj).each(function(){console.log("found with jquery object");});

// this works as a single DOM object
var wrap = $('<div/>').append(obj).eq(0);
$('div.media',wrap).each(function(){console.log("found with DOM object");});

Причина, по которой это работает, заключается в том, что мы вставляем ваш html как дочерний элемент и выполняем поиск по родительскому элементу.контейнер (обертка), и он получает 3 дочерних элементов, и он соответствует 2 из этих дочерних элементов.

Чтобы сделать это способом filter() и вернуть объект NEW jquery только с этими элементами: ссылка на фильтр документов

obj.filter('.media').each(function(){console.log("found with Filter");});

На основании вашего комментария вы можете сделать что-то вроде:

$(html).filter('.media').each(function(){
   var myDiv = $(this);
   // do stuff with myDiv.html();
});

Здесь вы можете оформить jsfiddle - немного устарело.

Answer 3

проблема в том, как вы вызываете console.log (). он оценивает прямо здесь и показывает найденное, даже если ничего не найдено. поскольку вы не передаете ссылку на функцию, вы просто вызываете log ('found')

у вас должно быть

jQuery('div.media', jq).each(function() { console.log("found") });