0

我的页面中有一个讨论线程，其中一个线程具有 parentID 并且对它的回复是它的孩子。在装饰 HTML 时，我从 JSON 文件中获取数据，其中提到了 parentID，如果它为 null，则它是父元素，否则子元素需要在其父 ID 'li' 标记处附加。我无法准确地放置符合我目的的代码。

代码：脚本：

//Write the data to discussion window
                            var message = $.parseJSON(data.d);
                            $("#ui-discussion").html(null);
                            $.each(message, function (index, item) {
                                if (item.ParentID == "NULL") {
                                    var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
                                    "<label  id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
                                    "<label>" + item.Display_Text + "</label><label id='discussionID'>" + item.DiscussionID + "</label></div></div>";
                                    $('<li class="ui-discussion-parentmessage">' + content + '</li>').appendTo('#ui-discussion');
                                }
                                else {


                                        var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
                                    "<label  id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
                                    "<label>" + item.Display_Text + "</label></div></div>";
                                        $('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#ui-discussion');

                                }

下面是我的 HTML：

 <ul id="ui-discussion">
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">24 Jul 2013</label><label>Loremipsumdolorsitamet,
                            consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Ut</label><label
                                id="discussionID">983402</label></div>
            </div>
        </li>
        <ul>
            <li class="ui-discussion-childmessage">
                <div>
                    <div id="empImage">
                        <img src="Images/emp2.png"></div>
                    <div>
                        <label id="empName">
                            Vincent Cash</label><label id="chatdate">24 Jul 2013</label><label>Loremipsumdolorsitamet,consecteturadipisicingelit</label></div>
                </div>
            </li>
        </ul>
        <ul>
            <li class="ui-discussion-childmessage">
                <div>
                    <div id="empImage">
                        <img src="Images/emp3.png"></div>
                    <div>
                        <label id="empName">
                            Tucker Montgomery</label><label id="chatdate">24 Jul 2013</label><label>Loremipsumdolorsitamet,consecteturadipisicingelseddoeiusmod</label></div>
                </div>
            </li>
        </ul>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>Hi</label><label
                            id="discussionID">590079</label></div>
            </div>
        </li>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>This is a test message</label><label
                            id="discussionID">424769</label></div>
            </div>
        </li>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>New Message</label><label
                            id="discussionID">255351</label></div>
            </div>
        </li>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>Hi</label><label
                            id="discussionID">2030</label></div>
            </div>
        </li>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>hi hi hi</label><label
                            id="discussionID">154860</label></div>
            </div>
        </li>
        <ul>
            <li class="ui-discussion-childmessage">
                <div>
                    <div id="empImage">
                        <img src="Images/emp1.png"></div>
                    <div>
                        <label id="empName">
                            Arti Agarwal</label><label id="chatdate">9/18/2013</label><label></label></div>
                </div>
            </li>
        </ul>
        <ul>
            <li class="ui-discussion-childmessage">
                <div>
                    <div id="empImage">
                        <img src="Images/emp1.png"></div>
                    <div>
                        <label id="empName">
                            Arti Agarwal</label><label id="chatdate">9/18/2013</label><label></label></div>
                </div>
            </li>
        </ul>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>hi</label><label
                            id="discussionID">282729</label></div>
            </div>
        </li>
        <ul>
            <li class="ui-discussion-childmessage">
                <div>
                    <div id="empImage">
                        <img src="Images/emp1.png"></div>
                    <div>
                        <label id="empName">
                            Arti Agarwal</label><label id="chatdate">9/18/2013</label><label>hi</label></div>
                </div>
            </li>
        </ul>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>hi</label><label
                            id="discussionID">587583</label></div>
            </div>
        </li>
        <li class="ui-discussion-parentmessage ui-state-active">
            <div>
                <div id="empImage">
                    <img src="Images/emp1.png"></div>
                <div>
                    <label id="empName">
                        Gareth Sweet</label><label id="chatdate">9/18/2013</label><label>HI</label><label
                            id="discussionID">395700</label></div>
            </div>
        </li>
    </ul>
4

1 回答 1

0

将此行更改$('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#ui-discussion');为

$('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#' + item.ParentID);

您还需要将您的 id 提供给<li>父母。

给予

var message = $.parseJSON(data.d);
$("#ui-discussion").html(null);
$.each(message, function (index, item) {
    if (item.ParentID == "NULL") {
        var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
            "<label  id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
            "<label>" + item.Display_Text + "</label><label id='discussionID'>" + item.DiscussionID + "</label></div></div>";
        $('<li class="ui-discussion-parentmessage" id="' + item.Enterprise_Id +'">' + content + '</li>').appendTo('#ui-discussion');
    } else {


        var content = "<div><div id='empImage'><img src='" + item.emp_thumbnail_src + "'/></div>" + "<div>" +
            "<label  id='empName'>" + item.Enterprise_Id + "</label><label id='chatdate'>" + item.Date + "</label>" +
            "<label>" + item.Display_Text + "</label></div></div>";
        $('<ul><li class="ui-discussion-childmessage">' + content + '</li></ul>').appendTo('#' + item.ParentID);

    }
});
于 2013-09-18T08:26:11.380 回答