Question

我是jquery的新手，所以请原谅我缺乏知识，我如何利用我附加的元素做任何事情？例如，我想在附加这些元素时隐藏第一个'.larger'。感谢。

function loadXML()
{
    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function(xml){
                $(xml).find('item').each(function(){
                    var id = $(this).attr('id');
                    var images = $(this).find('large').text();
                    var thumbs = $(this).find('thumb').text();
                    var descs = $(this).find('description').text();
                    $('<div class="thumber" id="thumb_'+id+'" rel="large_'+id+'" style="background-image: url('+thumbs+')"></div>').appendTo('#thumbslide');
                    $('<div class="larger" id="large_'+id+'" style="background-image: url('+images+')"></div>').appendTo('#view');
                });
    });

Answer 1

首先，4次做$（这个）是没有意义的。这样做会减慢你的代码速度。存储/缓存它会更有效。

var $this = $(this);

做你想做的事你可以做这样的事情......

$.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: function(xml){
            var first = true;
            $(xml).find('item').each(function(){
                var $this = $(this);
                var id = $this.attr('id');
                var images = $this.find('large').text();
                var thumbs = $this.find('thumb').text();
                var descs = $this.find('description').text();
                $('<div class="thumber" id="thumb_'+id+'" rel="large_'+id+'" style="background-image: url('+thumbs+')"></div>').appendTo('#thumbslide').toggle(!first);
                $('<div class="larger" id="large_'+id+'" style="background-image: url('+images+')"></div>').appendTo('#view').toggle(!first);
                first = false;
            });
});

使用jQuery，您可以继续进行连锁操作。

Answer 2

.each()方法的回调函数实际上有两个参数，即当前索引和当前dom元素：

.each(function(index, element))

您可以在创建元素时执行此操作：

$('<div class="larger" id="large_'+id+'" style="background-image: url('+images+')"></div>')
// apply css 'block' for first item, otherwise 'none' to hide
.css('display', index === 0 ? 'block' : 'none')
.appendTo('#view')

Answer 3

以下代码隐藏了除第一个以外的所有“.larger”元素：

$(".larger").not(":first").hide();

如何使用附加的div？

3 个答案: