当我创建一些可以动态加载内容的Web应用程序时,我遇到了很多问题。由于加载的脚本包含不知道文档中的位置以及将在一个文档中加载多少重复的对象。
因此,我想为jQuery对象的修改查找功能创建一些函数,这些函数将被加载文件的脚本使用,如下面的代码。
<body> <div id="outer-div" class="interested-style"> <div id="loaded-control-1"> <div class="interested-style"></div> </div> <div id="loaded-control-2"> <div class="interested-style"></div> </div> <div id="loaded-control-3"> <div class="interested-style"></div> </div> </body>
“loaded-control-2”对象的脚本可能有一些选择器,如下面的代码。
$('.interested-style')
在我的示例文档中,上面的JavaScript代码将返回三个对象。但是,如果我在指定的代码区域中使用选择器修改了查找函数的函数。上面的脚本应该只返回一个正确结果的对象。
解决方案可能与以下代码类似。
var dynamic-script = loadSection('some-section-name');
var modified-jQuery = getModifiedjQuery('loaded-control-2');
(function()
{
eval(dynamic-script);
})(modified-jQuery);
谢谢,
PS.1如果您直接修改jQuery对象,此页面上的另一个脚本将使用您的新jQuery选择器引擎。
答案 0 :(得分:1)
我不确定我明白你想做什么,今天在jQuery中无法做到。
如果您只想修改类interested-style
的div,该类是div loaded-control-X
的div的子级,那么您可以使用:
$('.loaded-control-X .interested-style')
这被称为“祖先死亡”选择器,它将匹配具有类interested-style
的任何元素,这些元素是具有类loaded-control-X
的任何元素的后代
如果您只想要具有班级loaded-control-X
的元素的孩子,您可以使用“父&gt;子”选择器:
$('.loaded-control-X > .interested-style')
jQuery API在指定元素方面非常灵活。有关详情,请参阅jQuery Selectors docs。
根据你的例子,如果我想将一个函数应用于具有类interested-style
的div loaded-control-2
的div,我将使用:
$('.loaded-control-2 .intereted-style').someFunction()
答案 1 :(得分:0)
那么,对于.find()函数的理论扩展,它如何知道它在网站结构中的位置才能正确找到特定元素?这会发生在点击事件上,还是有任何方法可以找到元素的父元素?是否可以为感兴趣的每个div生成某种独特的id,为您提供独特的选择?
答案 2 :(得分:0)
我只看到一个可选参数,即上下文可用于限制选择器的范围。
jQuery(表达式,[context])
此函数接受一个字符串 包含一个CSS选择器 然后用来匹配一组元素。 jQuery的核心功能 围绕这个功能。 jQuery中的所有内容都基于 这个,或以某种方式使用它。该 这个功能最基本的用途是 传递一个表达式(通常 由CSS组成,然后找到 所有匹配的元素。默认情况下,如果 没有指定上下文,$()查找 在上下文中的DOM元素 当前的HTML文档。 如果确实指定了上下文,例如DOM元素或jQuery对象,则表达式将与该上下文的内容进行匹配。
例如,您可以创建一些函数,如my recent question,以自动将参数添加到每个jQuery选择器中。请查看以下代码以便清楚理解。
// normal select
$('#some-object');
// You can limit scope of jQuery selector like this
$('#some-object', '#scope-object');
因此,您不再需要任何修改来查找功能。