jquery - slider 外部自己的 div 中的标题

Question

我正在使用bxslider 。它对我来说非常有效，但我有 1 个问题。我想要 bxwrapper 之外的标题。

slider 的 html 看起来像这样，只有 div 标题是我创建的

            <div class="captions"></div>
            <ul class="bxslider">
              <li><img src="images/1.jpg" title="headline, text" /></li>
              <li><img src="images/1.jpg" /></li>
              <li><img src="images/1.jpg" title="text" /></li>
              <li><img src="images/1.jpg" title="text" /></li>
            </ul>

标题是使用以下代码从图像标题生成的:

* Appends image captions to the DOM
     */
    var appendCaptions = function(){
        // cycle through each child
        slider.children.each(function(index){
            // get the image title attribute
            var title = $(this).find('img:first').attr('title');
            // append the caption
            if (title != undefined && ('' + title).length) {
                $(this).append('<div class="bxcaptions"><span>' + title + '</span></div>');
            }
        });
    }

我尝试将标题设置为位于 slider 之外的样式，但 slider 使用溢出隐藏，因此这是不可能的。

所以我希望将标题写入 <div class="captions"></div>我可以按照我想要的方式定位。

此外，我可能希望 , 之前的标题用 h1 突出显示，其余部分是正常的，但这只是额外的。

感谢您的帮助!

Answer 1

这里是 jsbin:http://jsbin.com/ikokex/3

jquery:

var captionText = '';    
$('ul.bxslider > li > img').each(function(i,e) {
  var titleAttr = $(this).attr('title');
  if(typeof titleAttr != 'undefined') {
     var captionSplit = titleAttr.split(',');
     $('.captions').append('<div class="caption-'+i+'"></div>');
     if (captionSplit.length > 1) {
       captionText += '<h1>'+captionSplit[0]+'</h1>';
       captionText += '<span>'+captionSplit[1]+'</span>';
     } else {
       captionText += '<span>'+captionSplit[0]+'</span>';
     }
     $('.caption-'+i).html(captionText);
     captionText = '';
  }
});