使用带有动态创建的div标签的readmore.js插件

readmore.js当我想折叠整个div时效果非常好。我需要弄清楚如何将readmore插件与动态创建的div一起使用，这样我就可以折叠我的表中需要它的部分。使用带有动态创建的div标签的readmore.js插件

我从数据库返回未知数量的行并将它们放入表中。这些字段是日期，联系人姓名和评论。注释字段可能很长，所以我想在每个注释中使用.readmore（）。

我目前正在做的是动态创建评论字段的股利。这个想法是使用DIV ID与.readmore（）

我的循环看起来像这样：

// NoteTable is html file's div that will display all the returned data 
// jquery append method is used to add a table and children rows: 
$('#NoteTable').append('<table></table>'); 
var table = $('#NoteTable').children(); 
table.append('<tr><td colspan="2" class="sec-hd2">Discharge Planning Notes</td></tr>'); 

// Loop thru the returned data in the json object: 
for (var i = 0; i < jsonNote.DATAREC.LIST.length; i++) { 

    // Add a row for date info: 
    table.append('<tr><td><b>Date:</b></td><td>' + jsonNote.DATAREC.LIST[i].COMMENT_DT + '</td></tr>'); 

    // Add a row for contact name info: 
    table.append('<tr><td><b>Personnel:</b></td><td>' + jsonNote.DATAREC.LIST[i].COMMENT_PRSNL + '</td></tr>'); 

    // use the loop# to create a unique ID for a new div tag: 
    var tempID = 'comment' + i 
    //alert (tempID) 

    // Add a row for the comments with a div tag around the comment string: 
    table.append('<tr><td colspan="2"><div id="' + tempID + '">' + jsonNote.DATAREC.LIST[i].COMMENT + '</div><br />&nbsp;</td></tr>'); 

    // Use the readmore plugin on this new div: 
    //table.append('$(#' + tempID + ').readmore()'); 
    // QUESTIONS/PROBLEMS WITH PREVIOUS LINE OF CODE: 
    // 1) I'm not sure if I need to append it to the table like I do everything else 
    //  (I don't get errors using tempID.readmore without the table.append but it doesn't work either 
    // 2) I'm not sure how to do the quote marks/pound sign/dollar sign when I build this string 

}

不管如何，我配置了代码的最后一行，我没有“读更多“的任何评论。我不确定语法应该如何。欣赏任何想法。如果这会更好，我愿意彻底改造。

更多信息：readmore

来源

2013-10-17 Mindy Glaze

由于Readmore.js是一个jQuery插件，它可以采取一个返回元件的阵列的选择器。所以，我建议是增加一个类，而不是一个ID，你的动态生成的DIV，然后使用该类来初始化Readmore.js：

// Add a row for the comments with a div tag around the comment string: 
table.append('<tr><td colspan="2"><div class="long-text">' + jsonNote.DATAREC.LIST[i].COMMENT + '</div><br />&nbsp;</td></tr>');

然后，你的循环之外，您先请”已经建立了表并将其附加到DOM：

$('.long-text').readmore();

这应该做到这一点。

来源

2013-10-17 22:42:06 Jed

这很漂亮。谢谢。 –

我尝试了这个解决方案，它使用html（）添加到DOM中，但它不起作用。尽管如此，相同的初始化对于静态创建的div有相同的类名称。 – Tomer

使用带有动态创建的div标签的readmore.js插件

回答

相关问题