數據標題的圖像格式

-1

在我的燈箱，我能夠顯示數據標題，但我想要顯示每個標題的數據... 是我把fdiv標籤之間的每個標題它不來一個又一個數據標題的圖像格式

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

如何格式化提供以下

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

斯科爾斯魯尼弗格森爵士魯尼數據-IM我的小提琴年齡=「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>

來源

2013-01-23 js.js

你想再做什麼？ –

我想格式化這樣的數據標題

Paul Scholes

Wayne Rooney

Sir Alex Ferguson

–

所以你想採取每個標題，然後將它們循環到一個單一的字符串？ –

此代碼將每個數據的標題，並將其放置到它自己的div元素。

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

這裏有一個的jsfiddle：http://jsfiddle.net/VbBrj/

來源

2013-01-23 22:08:12

感謝您的回覆...你可以在小提琴http://jsfiddle.net/ZrpLT/49/ –

更新，我要求一個圖像與三個不同的標題 –

我更新了一個jsFiddle到這個：http://jsfiddle.net/ZrpLT/51/。我不認爲這是你想要的。我看到你的一些字幕被設置爲「保羅·斯科爾斯魯尼爵士弗格森爵士」。你願意把它們分開嗎？ –

這樣的事情？

<!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>

來源

2013-01-23 22:14:05

感謝您的回覆......你可以更新在這個小提琴......它很混亂嘗試代碼jsfiddle.net/ZrpLT/49 –

嘗試將代碼分解成更小的塊，任何複雜的東西都可以製作成更小，更易於管理的塊。 –

我要求提供三個不同標題的單個圖像 –

數據標題的圖像格式

回答

相關問題