0

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

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

当有人用 输入字段时class="sch"，我试图用 找到父 div class="resdiv1000"。然后我需要遍历元素以找到带有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 );
        }

    });
});
4

2 回答 2

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

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

于 2013-11-11T13:03:01.317 回答
1

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

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

进入这个：

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

因为您传递给 children() 的参数仅过滤元素的直接子元素，而不是任何后代。

于 2013-11-11T13:01:59.140 回答