Jquery选择数组

时间:2016-06-03 07:59:53

标签: arrays visibility

我正在尝试将css样式仅应用于数组的奇数对象。 它没有用。到目前为止我的代码是,

var products = [
    { title: 'Botín', price: 800.44, category: 'Botines', image: 'images/005030000D65804_1.jpg', brand: 'nike' },
    { title: 'Ojotas', price: 300.99, category: 'Ojotas', image: 'images/004632000F88356_1.jpg', brand: 'adidas' },
    { title: 'Zapatillas', price: 1120.00, category: 'Calzado', image: 'images/077632604336703_1.jpg', brand: 'puma' },
    { title: 'Short', price: 320.44, category: 'Vestimenta', image: 'images/077652619598012_1.jpg', brand: 'nike' },
    { title: 'Jabulani South Africa 2010', price: 700.52, category: 'Pelotas', image: 'images/adidas-jabulani-photo.jpg', brand: 'nike' },
    { title: 'Zapatillas', price: 1120.00, category: 'Calzado', image: 'images/077632604336703_1.jpg', brand: 'puma' },
    { title: 'Short', price: 320.44, category: 'Vestimenta', image: 'images/077652619598012_1.jpg', brand: 'nike' },
    { title: 'Jabulani South Africa 2010', price: 700.52, category: 'Pelotas', image: 'images/adidas-jabulani-photo.jpg', brand: 'nike' }
    ];

    $(products).each(function(i, obj) {
        $('#espacio-articulos').append('<article class="articulo"><img class="image" src="'+obj.image+'"/><div class="oferta">OFERTA</div><span class="title">'+obj.title+'</span><span class="price">$ '+obj.price+'</span><span class="brand '+obj.brand+'"></span><span class="category">'+obj.category+'</span>');
        e = i+3;
        if (e % 2) {
            $('.oferta').css('visibility','visible');
        }
    });

我必须将.oferta可见性应用于奇怪的项目。只有这些元素(这是奇数)。请帮忙!

1 个答案:

答案 0 :(得分:0)

要将css规则应用于具有奇数位置的元素,只需更改代码,如下所示:

...
$(products).each(function(i, obj) {
    $('#espacio-articulos').append('<article class="articulo"><img class="image" src="'+obj.image+'"/><div class="oferta">OFERTA</div><span class="title">'+obj.title+'</span><span class="price">$ '+obj.price+'</span><span class="brand '+obj.brand+'"></span><span class="category">'+obj.category+'</span>');
    if (i % 2 > 0) {
        $('#espacio-articulos article:last .oferta').css('visibility','visible');
    }
 });