使用帶有動態創建的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插件

回答

相關問題