jQuery找到子元素的父元素，然后将操作应用于初始父元素的另一个子元素

Question

我正在尝试实现一个搜索框，以突出显示可调整大小和可拖动的多个div中的结果。

我已经可以搜索和突出显示结果，但是该操作是在所有div上执行的，而不是当前处于活动状态的div。 理想的解决方案是将操作应用于正在使用的元素，而不是所有可用元素。

当有人使用class="sch"输入输入字段时，我正在尝试使用class="resdiv1000"查找父div。 然后，我需要遍历所有元素以找到name="resdiv1000"的iframe。

我试图在下面的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('.resdiv').find('iframe');
var page2 = test.contents().find('html');

分配测试变量时，children方法仅查找直接后代。 iframe嵌套在另一个元素中。 查找是您的解决方案。

Answer 2

在您的代码段中尝试更改此内容：

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

到这个：

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

因为您要传递给children（）的参数仅过滤元素的直接子对象，而不过滤任何后代。