Question

我正在尝试自定义一个插件，该插件使用以下函数呈现Tumblr帖子的图像。

到目前为止，我只是设法将类.photoset添加到照片帖子的ul中，如果有2张或更多图像的话。

function getImages(post) {
    //        console.log(post)
    var html = [];
    html.push("<ul class='tumblr_post_images'>")
    $.each(post.photos, function (i, photo) {
        html.push('<li class="photo"><img src=' + photo.alt_sizes[0].url + '></li>')            
    })

    $('.post_photo ul').has('li:nth-child(n+2)').addClass("photoset"); 

    html.push("</ul>")

    return html.join("");               
};

理想情况下，如果帖子中有超过2个图像，我希望它只渲染ul，以便标记清晰。我尝试了一些条件语句，但我无法让它工作。任何帮助都感激不尽。

更新感谢T.J.克劳德斯的答案我找到了解决问题的方法。这是有效的代码：

    //Function to retrieve all the images from the post. This builds an array which is then returned as html list of images.
       function getImages(post) {
var html = [];

// Get the HTML
if (post.photos.length === 1) {
    $.each(post.photos, function (i, photo) {
              html.push('<img src=' + photo.alt_sizes[0].url + '>')
                    })}
                else {
        // More than one
        html.push("<ul class='photoset'>")
        $.each(post.photos, function (i, photo) {
            html.push('<li class="photo"><img src=' + photo.alt_sizes[0].url + '></li>')            
        });
        html.push("</ul>");
    }
          return html.join("");
       }

更新2 T.J.有一个错误。克劳德斯的原始答案。他修好了，现在他的答案有效！谢谢！

Answer 1

尝试使用以下代码替换$('.post_photo ul').has('li:nth-child(n+2)').addClass("photoset");：

if (post.length == 2) {
    $('.post_photo ul').addClass("photoset")
}

Answer 2

尝试使用此$(id).children().length来获取子元素的计数

Answer 3

基本上我只想在照片帖子中有2个或更多图像
时才创建ul

然后只需检查post.photos.length：

function getImages(post) {
    var html = [];

    // Get the HTML
    if (post.photos.length) {
        // We have at least one image
        if (post.photos.length === 1) {
            // Just one image
            html.push('<img src=' + post.photos[0].alt_sizes[0].url + '>');
        }
        else {
            // More than one
            html.push("<ul class='tumblr_post_images'>")
            $.each(post.photos, function (i, photo) {
                html.push('<li class="photo"><img src=' + photo.alt_sizes[0].url + '></li>')            
            });
            html.push("</ul>");
        }
    }

    // Add or remove the class depending on whether we have more than one    
    $('.post_photo ul').toggleClass("photoset", post.photos.length > 1); 

    // Return the HTML (why are we returning it rather than putting it in the element here?)
    return html.join("");               
}

另请注意我添加了丢失的分号（强烈建议不要依赖自动分号插入的恐怖）并删除不必要的分号（函数声明是声明，而不是表达式;有在它们的末尾没有;。

Jquery - 如果父有两个或更多子项，则创建ul，否则不创建ul

3 个答案: