小编pju*_*pju的帖子

我正在尝试在jQuery中编写一个类似插件的函数,以便使用AJAX将元素添加到容器中.它看起来像这样:

$.fn.cacheload = function(index) {
    var $this = $(this);
    $.get("cache.php", {{ id: index }).done(function(data) {
        // cache.php returns <div class='entry'>Content</div> ...
        $(data).insertAfter($this.last());
    });
}

我想像这样使用它:

var entries = $("div.entry"),
    id = 28;

entries.cacheload(id);

认为这将加载另一个"入口"容器并将其添加到DOM.

到目前为止这是有效的.但是当然保存缓存的jQuery对象(entries)的变量不会更新.因此,如果在开头有两个div,并且你将使用此函数添加另一个div,它将在DOM中显示,但entries仍然仅引用原始的两个div.

我知道你不能使用get的返回值,因为AJAX调用是异步的.但有没有办法更新缓存的对象,所以它包含通过AJAX加载的元素？

我知道我可以这样做并在插入后重新查询:

    $.get("cache.php", {{ id: num }).done(function(data) {
        $(data).insertAfter($this.last());
        entries = $("div.entry");
    });

但为此我必须直接引用保存缓存对象的变量.有没有办法绕这个,所以功能是独立的？我尝试重新分配$(this),但收到了错误..add()不更新缓存对象,它会创建一个新的(临时)对象.

非常感谢!

//更新:

John S在下面给出了一个非常好的答案.然而,我最终意识到对我来说其他东西实际上会更好.现在,插件函数插入一个空白元素(同步),当AJAX调用完成时,该元素的属性会更新.这也确保了元素以正确的顺序加载.对于任何绊倒这个的人来说,这是一个JSFiddle:http://jsfiddle.net/JZsLt/2/

我遇到一种情况，需要在图像下方显示标题（不重叠）。图像的大小和字幕的长度都不是已知的。

整个图形元素的高度需要为100％，如下所示：

元素的宽度应该是动态的，由图像比例确定，标题应相应地换行。这很重要，因为我需要彼此相邻显示多个图像。

有什么我可以用CSS来实现的吗？

我尝试使用CSS表格，但是不能在100％的高度上使用。您可以在这里看到我的努力：

display: table

http://codepen.io/pju/pen/ZOmdEb

而使用flexbox则有其自身的问题。

display: flex

http://codepen.io/pju/pen/QEJXNZ