Question

我有以下源代码树：

source
|-html
|  |-div1.html
|  |_div2.html
|-js
|  |_bundle.js
|_index.html

我的index.html看起来如下：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/ecmascript" src="./js/bundle.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
      $(document).ready(function(e){
        $('#div1').load('./html/div1.html');
      });
      $(document).ready(function(e){
        $('#div2').load('./html/div2.html');
      });
    </script>
  </body>
</html>

如何使用jQuery，以便在<div>和div1.html的外部html源中操作div2.html？假设它们都包含以下代码段：

<div id="tParagraph">
  <p>This is a paragraph</p>
</div>

Answer 1

首先要注意的是id必须是唯一的，因为你说两个文件都有相同的HTML。

成功加载后，您可以像访问任何其他DOM元素一样访问这些元素。

$("#tParagraph")

为了确保加载它，你必须使用回调。

 $('#div2').load('./html/div2.html', function(){

  // loaded.
});

将它们放在一起

$('#div2').load('./html/div2.html', function(){
   $("#tParagraph").dosomeThing();
});

jQuery如何使用外部源的DOM对象

1 个答案: