JQuery найти родительский элемент дочернего элемента, а затем применить действие к другому дочернему элементу исходного родителя

Question

Я пытаюсь реализовать окно поиска, которое выделяет результаты по нескольким div, которые изменяются по размеру и перетаскиваются.

Я дошел до того места, где я могу искать и выделять результаты, но действие выполняется во всех div, а не в том, что в настоящее время активно. Идеальное решение применило бы действие к используемому элементу, а не ко всем доступным элементам.

Когда кто-то вводит в поле ввода class="sch", я пытаюсь найти родительский div с class="resdiv1000". Затем мне нужно пройти по элементам, чтобы найти iframe с name="resdiv1000".

Я попытался использовать следующий код в jquery ниже. Это не работает. Полный пример jquery работает, но когда этот фрагмент включен, он прерывается. Почему это происходит? Любые предложения приветствуются.

var test = $(this).closest('div[class^="resdiv"]').children('iframe[name^="resdiv"]'); 
var page2 = test.contents().find('html'); 

Вот HTML:

<div class="resdiv1000 resizable"> 
    <div class="checkdrag"> 
     <div class="backward" onclick="resdiv1000.history.back()">&lt;</div> 
     <div class="forward" onclick="resdiv1000.history.forward()">&gt;</div> 
     <span class="rslts-a"></span> 
     <input type="text" class="sch" /> 
    </div> 
    <div class="xout">X</div> 
    <div id="rescont1000" > 
     <iframe src="http://www.Thissite.com/grab.php?item=http://www.mysite.com" name="resdiv1000"></iframe> 
    </div> 
    <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div> 
    <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div> 
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div> 
</div> 

Вот JQuery, что я использую:

$(function() { 
    $('.sch').bind('keyup change', function(ev) { 
     // pull in the new value 
     var searchTerm = $(this).val(); 

     // remove any old highlighted terms 
     var page2 = $('iframe[name^="resdiv"]').contents().find('html'); 
     page2.removeHighlight(); 
     //$('body').removeHighlight(); 

     // disable highlighting if empty 
     if (searchTerm) { 
      // highlight the new term 
      page2.highlight(searchTerm); 
      //$('body').highlight(searchTerm); 
     } 

    }); 
}); 

Answer 1

В фрагменте кода, попробуйте это изменить:

var test = $(this).closest('div[class^="resdiv"]').children('iframe[name^="resdiv"]'); 

в этом:

var test = $(this).closest('div[class^="resdiv"]').find('iframe[name^="resdiv"]'); 

поскольку аргумент, передаваемый детям(), фильтрует только прямые дочерние элементы, а не потомок.

Answer 2

var test = $(this).closest('.resdiv').find('iframe'); 
var page2 = test.contents().find('html'); 

При назначении тестовой переменной метод children ищет только прямых потомков. IFrame вложен в другой элемент. Найти ваше решение.