0

我建立了一个小站点来测试使用该.load()方法加载元素的内容。虽然 .load 如果我将目标元素放在<div>标签内就可以工作，但我不能让它只在目标元素上工作，即<h1>标签中的页面标题。有没有办法在我的 HTML 中每个受影响的元素周围.load()不放置标签来加载内容？<div>

我的第 1 页 HTML：

<body>
<h1 id="pagetitle">Page 1</h1>
<p>Some paragraph text</p>
<a id="page2">page 2</a>
</body>

对于第 2 页，HTML 是相同的，除了标题是<h1>Page 2<h1>.

我的 jQuery：

$('a#page2').click(function () {
$("#pagetitle").load("page2.html #pagetitle > *");
});

从我读过的所有内容中，单击#page2 应该从page2.html 加载#pagetitle 标记的内容，但是没有添加内容-相反，内容（“第1 页”）只是消失了。

但是，如果我<div>在元素周围添加标签<h1>并加载 div：

$("div#pagetitle").load("page2.html div#pagetitle > *");

内容被替换。但是，为了保持我的 HTML 整洁，如果有更好的方法，我想避免这种情况。

4

1 回答 1

1

> *选择元素的直接子#pagetitle元素，在您的标记h1元素中没有任何后代元素，因此查询失败并且它不返回任何内容，删除> *选择器并且它应该可以工作。但是，它会将加载的h1元素添加到当前h1元素，jQuery.load()方法使用$.get()实用函数，您可以使用此函数替换元素或更改innerHTML当前h1元素的属性。这使您可以更好地控制加载的 html。

$('#page2').click(function(event) {
   // event.preventDefault();
   $.get('page2.html', function(data) {
       $("#pagetitle").html(function() {
            return $(data).find('#pagetitle').html();
       });
   }, 'html');
});
于 2013-09-29T20:35:06.443 回答