为 jquerys .load(） 准备参数

Prepare parameter for jquerys .load()

本文关键字：参数 jquerys load      更新时间：2023-09-26

我正在尝试将一个html文件加载到另一个html文件中。

例如：

$(function() {
    $('#main li').on('click', function() {
        var loadstring = $(this).data('url') + ' ' +  $(this).data('target');
        $('#container').load( loadstring );
    });
});
<div id="main">
    <ul>        
        <li data-url="home.html" data-target="#foo">Home</li>
        <li data-url="some.html" data-target="#bar">Some</li>                   
    </ul>
</div>
<div id="container"> </div>

在我的some.html中是一个包含数据并具有 id bar 的 <p> 元素。在我的家中.html没有 id foo 的元素。

我想要实现的是：

我想要的是检查加载的文件是否具有具有特定 id 的元素。 或类，具体取决于传递的数据。如果是，加载应如下所示：

home.html #foo

如果没有，负载应如下所示

home.html

所以整个页面都被加载了。

有没有办法让我使用 load（） 并检查现有元素？

我尝试了一些这样的

var loadstring = $(this).data('url') + ' ' +  $(this).data('target');
var e = $('#container').load( loadstring );
alert(e.prop('childElementCount'));

但这导致了 0，并且在第二次尝试时它说它找到了一个元素，因为实际上它在我的容器中而不是在加载文件中查找:D

对于那些喜欢尝试运气的人，

我只是在这里建立一个小的"测试小提琴"^^

最好的办法是使用异步调用来加载文件：

$(document).on('click', '#main li', function () {
    var url = $(this).data('url');
    var targetSelector = $(this).data('target');
    var callback = function (data) {
        $(targetSelector).html(data);
    };
    var dataType = 'text/html';
    $.get(url, {}, callback);
});

你最好从jquery获取源代码，并使用ajax（基于 https://github.com/jquery/jquery/blob/master/src/ajax/load.js）制作你的自定义加载器，但你只想调整你的代码（未经测试）：

$(function() {
    $('#main li').on('click', function() {
        var $this    = $(this);
        var url      = $(this).data('url');
        var selector = $(this).data('target');
        $('#container').load(url, function(responseText){ 
            var $content = $("<div>").append($.parseHTML(responseText)).find(selector);
            if($content.length)
               $this.html($content);
            // Else: full content already inserted by jQuery.load
        });
    });
});

希望这有帮助。干杯！

相关文章：