修改通过 .load() 创建的元素的 CSS

Question

第一次使用jQuery。我正在使用它将外部元素的内容加载到我的页面上。它加载正常，但我发现正常的遍历方法对加载的元素不起作用。例如，我有：

<div id="area"></div>
<script type="text/javascript">
     $("#area").load("externalPage.html #externalElement > *");
     $("#area").find("ul").first().css("display","none");
</script>

脚本的第二行似乎什么也没做。这和操作完成的顺序有关系吗？

我正在将其加载到 Blackboard LMS 上的自定义 HTML 模块中，如果脚本编写过于复杂，它有时会表现得很奇怪，所以这很可能又是一次。谢谢你帮我解决！

Answer 1

您需要将第二行放在 .load():

的回调中

$("#area").load("externalPage.html #externalElement > *", function() {
  $("#area").find("ul").first().css("display","none");
});

$.get() 和 $.fn.load() 之类的东西是建立在基本 jQuery $.ajax() 系统上的便利功能。加载内容的过程本质上是异步的。

Answer 2

.load() 有一个完成时的回调。您可以对其中的新标记做任何您想做的事情。

$("#area").load('foo.html', function () { 
  /* Now you have access to foo.html's markup */
});

Answer 3

对 load() 的调用是异步的。这意味着您的 find() 正在运行之前请求完成并且元素在 DOM 中创建。

要解决此问题，您可以将逻辑放在 load() 的回调参数中。这意味着在请求完成并且 DOM 处于您期望的状态之前不会调用它。试试这个：

$("#area").load("externalPage.html #externalElement > *", function() {
    $("#area").find("ul").first().css("display","none");
});

修改通过 .load() 创建的元素的 CSS

modify CSS of elements created via .load()

html

javascript

css

jquery

dom-traversal