Question

我想尝试一下编辑器来帮助我的学生更好地理解jQuery。它可用于演示和测试代码。现在他们将编写诸如

之类的代码

$("document").ready(function(){
   $("p").css("background","red");
});

现在我想要将此代码仅应用于使用类jQuery-test存在于div中的演示代码，而不是应用于此容器外部的p元素。是否有可能实现这样的目标？

更新：我想我不够清楚。 jQuery代码必须与学生提交的代码保持一致。我希望能够将它动态地应用到页面的某个部分。

Answer 1

您必须更具体地使用例如find()方法：

$(document).ready(function(){
   $('.jquery-test').find("p").css("background","red");
});

无论如何，你应该使用CSS代替......

.jquery-test p { background:red; }

Answer 2

非常简单$（“p”）是选择器。所以$(".jquery-test").css("background","red"); 应该做的伎俩。

Answer 3

jQuery上下文选择器或find（）方法将有助于执行此操作：

$("document").ready(function(){
   $("p", ".jquery-test").css("background","red"); // context selector
   //$(".jquery-test").find("p").css("background","red"); // find method
});

Answer 4

您需要将您想要的代码限制在选择器中。

$(function(){
    $('.jquery-test p').css('background','red');
});

虽然你总是不得不应用它，但这有点痛苦....

你可能会看一个插件来实现这个目标 - 你需要提供更多关于你想要实现的事情的信息。或者，让您的学生使用类似的jsfiddle。

Answer 5

试试这个

$(document).ready(function(){
    $('.jquery-test p').css("background","red");
});

限制jquery应用于某个容器的元素

5 个答案: