【问题标题】:How does modify jQuery find function to be used in the specified script?如何修改 jQuery 查找函数以在指定脚本中使用?
【发布时间】:2009-11-06 01:23:42
【问题描述】:

当我创建一些可以动态加载内容的 Web 应用程序时,我遇到了很多问题。由于加载的包含脚本不知道在文档中放置的位置以及在一个文档中将加载多少重复对象。

因此,我想为 jQuery 对象的修改后的 find 函数创建一些函数,该函数将被加载文档的脚本使用,如下面的代码。

<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 选择器引擎。

【问题讨论】:

标签: jquery ajax


【解决方案1】:

我不确定我是否理解你想要做的事情,而今天在 jQuery 中无法做到。

如果您只想修改类为interested-style 的div,它是类loaded-control-X 的子div,那么您可以使用:

$('.loaded-control-X .interested-style')

这被称为“祖先死者”选择器,它将匹配具有类 interested-style 的任何元素,这些元素是具有类 loaded-control-X 的任何元素的后代

如果你只想要 loaded-control-X 类的元素的 children,你可以使用“parent > child”选择器:

$('.loaded-control-X > .interested-style')

jQuery API 在指定元素方面非常灵活。请参阅jQuery Selectors docs 了解更多信息。

以你的例子为例,如果我想将一个函数应用于类 interested-style 的 div,它是类 loaded-control-2 的子类,我会使用:

$('.loaded-control-2 .intereted-style').someFunction()

【讨论】:

【解决方案2】:

那么,对于 .find() 函数的这个理论扩展,它如何知道它在站点结构中的哪个位置以正确找到特定元素?这会发生在点击事件上,还是有办法找到元素的父级?是否可以为每个具有兴趣样式的 div 生成某种独特的 id,从而为您提供独特的选择?

【讨论】:

  • 从我的设计模式来看,我总是在点击或事件函数中不写任何选择器。
【解决方案3】:

我只看到了一个可选参数,它是上下文可用于限制选择器的范围。

jQuery(表达式,[上下文])

这个函数接受一个字符串 包含一个 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');

所以,你不再需要任何修改来查找函数了。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-24
    • 2015-07-24
    • 1970-01-01
    • 2016-05-02
    • 2013-08-22
    • 2013-04-02
    • 1970-01-01
    • 2021-06-05
    相关资源
    最近更新 更多