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（）的参数只过滤元素的直接子元素而不过滤任何后代。

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

2 个答案: