图像格式的数据标题

时间:2013-01-23 21:44:35

标签: javascript jquery html5 jquery-ui css3

在我的灯箱中,我可以显示数据标题中的数据 但我想逐个显示每个标题...... 我把fdiv标签放在每个标题之间,而不是一个接一个地出现

data-caption="Paul Scholes Wayne Rooney Sir Alex Ferguson "

如何格式化它 提供我的小提琴

http://jsfiddle.net/ZrpLT/46/

                    Paul Scholes Wayne Rooney Sir Alex Ferguson data-image =“http://www.defie.co/designerImages/thumbnails/inventory.png”>
                <div data-caption="Paul Scholes Wayne Rooney Sir Alex Ferguson " data-image="http://www.defie.co/designerImages/thumbnails/search.png"></div>
                <div data-caption="Wayne Rooney" data-image="http://www.defie.co/designerImages/thumbnails/yourFile.png"></div>
                <div data-caption="Sir Alex Ferguson" data-image="http://www.defie.co/designerImages/thumbnails/shareFiles.png"></div>
                <div data-caption="Champ" data-image="http://www.defie.co/designerImages/thumbnails/custFile.png"></div>
                <div data-caption="Group" data-image="http://www.defie.co/designerImages/thumbnails/custQuote.png"></div>
                <div data-caption="Ryan Giggs" data-image="http://www.defie.co/designerImages/thumbnails/saleOrders.png"></div>
                <div data-caption="David Beckham" data-image="http://www.defie.co/designerImages/thumbnails/custInvoice.png"></div>
                <div data-caption="Champ" data-image="http://www.defie.co/designerImages/thumbnails/vendorProfile.png"></div>
                <div data-caption="Group" data-image="http://www.defie.co/designerImages/thumbnails/vendorQuote.png"></div>
                <div data-caption="Ryan Giggs" data-image="http://www.defie.co/designerImages/thumbnails/buyOrders.png"></div>
                <div data-caption="David Beckham" data-image="http://www.defie.co/designerImages/thumbnails/vendorInvoice.png"></div>
                <div data-caption="Champ" data-image="http://www.defie.co/designerImages/thumbnails/accountsReceivable.png"></div>
                <div data-caption="Group" data-image="http://www.defie.co/designerImages/thumbnails/customerRMA.png"></div>
                <div data-caption="Ryan Giggs" data-image="http://www.defie.co/designerImages/thumbnails/production.png"></div>
                <div data-caption="David Beckham" data-image="http://www.defie.co/designerImages/thumbnails/CRM.png"></div>
            </div>

2 个答案:

答案 0 :(得分:0)

此代码将采用每个数据标题并将其放入其自己的div元素中。

$data = '';
$('[data-caption]').each(function(){
    $data += '<div>' + $(this).data('caption') + '</div>';
});

这是一个jsFiddle:http://jsfiddle.net/VbBrj/

答案 1 :(得分:0)

这样的事情?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var s = '';
    $('#container div').each(function (index) {
        var mycap = $(this).data('caption');
        s += '<div>'+mycap+'</div>';
    });
    console.log(s);
    $('body').append(s);
});
</script>
</head>
<body>
<div id='container'>
    <div data-caption="Wayne Rooney" data-image="http://www.defie.co/designerImages/thumbnails/yourFile.png"></div>
    <div data-caption="Sir Alex Ferguson" data-image="http://www.defie.co/designerImages/thumbnails/shareFiles.png"></div>
    <div data-caption="Champ" data-image="http://www.defie.co/designerImages/thumbnails/custFile.png"></div>
    <div data-caption="Group" data-image="http://www.defie.co/designerImages/thumbnails/custQuote.png"></div>
    <div data-caption="Ryan Giggs" data-image="http://www.defie.co/designerImages/thumbnails/saleOrders.png"></div>
    <div data-caption="David Beckham" data-image="http://www.defie.co/designerImages/thumbnails/custInvoice.png"></div>
    <div data-caption="Champ" data-image="http://www.defie.co/designerImages/thumbnails/vendorProfile.png"></div>
    <div data-caption="Group" data-image="http://www.defie.co/designerImages/thumbnails/vendorQuote.png"></div>
    <div data-caption="Ryan Giggs" data-image="http://www.defie.co/designerImages/thumbnails/buyOrders.png"></div>
    <div data-caption="David Beckham" data-image="http://www.defie.co/designerImages/thumbnails/vendorInvoice.png"></div>
    <div data-caption="Champ" data-image="http://www.defie.co/designerImages/thumbnails/accountsReceivable.png"></div>
    <div data-caption="Group" data-image="http://www.defie.co/designerImages/thumbnails/customerRMA.png"></div>
    <div data-caption="Ryan Giggs" data-image="http://www.defie.co/designerImages/thumbnails/production.png"></div>
    <div data-caption="David Beckham" data-image="http://www.defie.co/designerImages/thumbnails/CRM.png"></div>
</div>
</body>
</html>