jQuery在Click上创建嵌套元素

Question

我正在使用node.js，socket.io和jquery制作一个小型聊天应用程序作为一个小项目，为了符合我的标记，无论何时提交表单，它都会将消息和发件人附加到一个系列中嵌套的div。如何使用jquery以正确的顺序创建新的div并发送到socket.io？

提交表单前的代码：

<div class="messages">
    <div class="grid" id="messagesGrid">
      <div class="message">
        <div class="send grid__col grid__col--4-of-6"><p>*Static welcome text*</p></div>
        <div class="sender grid__col grid__col--2-of-6"><p>*from whoever*</p></div>
      </div>
    </div>
 </div>

发送表单/新邮件后：

<div class="messages">
    <div class="grid" id="messagesGrid">
      <div class="message">
        <div class="send grid__col grid__col--4-of-6"><p>*Another message</p></div>
        <div class="sender grid__col grid__col--2-of-6"><p>*another user*</p></div>
      </div>
      <div class="message">
        <div class="send grid__col grid__col--4-of-6"><p>*Static welcome text*</p></div>
        <div class="sender grid__col grid__col--2-of-6"><p>*from whoever*</p></div>
      </div>
    </div>
</div>

我当前的客户js：

var socket = io();
var $div = $("<div>", {"class": "message grid__col grid__col--4-of-6"});
var $p = $("p");

$('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    socket.emit('chat name', $('#n').val());
    $('#n').val('');
    return false;
});

socket.on('chat message', function(msg){
   var $newMessage = $div.append('.messages');
   $('#messagesGrid').append($newMessage.text(msg));
});

// socket.on('chat name', function(sender){
//   $('.grid').append($('.sender').text(sender));
// });

提前致谢。

Answer 1

$("form").submit(function(){
    var $divMessage = $("<div");
    $divMessage.addClass('message');

    var $divSend = $("<div>");
    $divSend.addClass('send grid__col grid__col--4-of-6');

    var $divSendParagraph = $("<p>");
    $divSendParagraph.text($("#m").val());
    $divSend.append($divSendParagraph);

    var $divSender = $("<div>");
    $divSend.addClass('sender grid_c_col grid__col--2-of-6');

    var $divSenderParagraph = $("<p>");
    $divSenderParagraph.text($("#n").val());
    $divSender.append($divSenderParagraph);


    $divMessage.append($divSend);
    $divMessage.append($divSender);


    // and your socketio code goes here
})

Answer 2

你可以通过多种方式实现这一目标，以下是两种有用的方法：

（1）使用.clone()函数克隆.message中的第一个.messagesGrid div并更改其两个子div上的必要文本数据。< / p>

示例脚本：

var $parent = $('#messagesGrid'), // the parent grid
    $form = $('#yourMessage'), // the form 
    userMsg = $form.find('#myMessage').val(), // user message
    userName = $form.find('#myName').val(); // user name

    /*
     * Clone the first `.message` div
     * Set first div's <p> element text to a new value
     * Set second div's <p> element text to a enw value
     */
    var $clone = $parent.find('.message').first().clone();
    $clone.children().eq(0).find('p').text(userMsg);
    $clone.children().eq(1).find('p').text(userName);

    // prepend to the messagGrid the new message
    $parent.prepend($clone);

<强>演示：

$('#submit').on('click', function(e) {
    e.preventDefault();
    e.preventDefault();

    var $parent = $('#messagesGrid'),
        $form = $('#yourMessage'),
        userMsg = $form.find('#myMessage').val(),
        userName = $form.find('#myName').val();


    if (userMsg === '') {
        return; // do nothing on empty message
    }

    if (userName === '') {
        userName = 'Anonymous'
    }

    var $clone = $parent.find('.message').first().clone();
    $clone.children().eq(0).find('p').text(userMsg);
    $clone.children().eq(1).find('p').text(userName);

    // prepend to the messagGrid the new message
    $parent.prepend($clone);

    // do sockets here
});

form * {
    display: block;
}

.message:nth-child(odd) {
    background: #939393;
    color: white;
}

.message:nth-child(even) {
    background: #6e6e6e;
    color: white;
}

.btn-container * {
    display: inline-block;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages">
    <div class="grid" id="messagesGrid">
        <div class="message">
            <div class="send grid__col grid__col--4-of-6">
                <p>*Static welcome text*</p>
            </div>
            <div class="sender grid__col grid__col--2-of-6">
                <p>*from whoever*</p>
            </div>
        </div>

    </div>
</div>

<form id="yourMessage">
    <label for="message">Message:
        <textarea name="message" id="myMessage" cols="60" rows="5"></textarea>
    </label>
    <label for="user">User:
        <input type="text" id="myName" name="user" value="">
    </label>

    <div class="btn-container">
        <button id="submit" type="submit">
            Send
        </button>
    </div>

</form>

注意：如果使用此方法，请确保.messagesGrid包含静态.message div，否则这将无效，因为它会克隆第一个.message容器。

（2）重新创建.message容器

示例脚本：

var $parent = $('#messagesGrid'), // the parent grid
    $form = $('#yourMessage'), // the form
    userMsg = $form.find('#myMessage').val(), // form input : user message
    userName = $form.find('#myName').val(); // form input : user name

    // create a new `message` container
    var $message = $('<div>', {
        class: 'message'
    });

    // message container's 1st child `the message`
    var $row1 = $('<div>', {
        class: 'send grid__col grid__col--4-of-6'
    }).append(
        $('<p>', { // append a <p> element of value user message
            text: userMsg
        })
    );

    // message container's 2nd child `the user`
    var $row2 = $('<div>', {
        class: 'send grid__col grid__col--2-of-6'
    }).append(
        $('<p>', { // append a <p> element of value user name
            text: userName
        })
    );

    // append both rows to message container
    $message.append($row1, $row2);

    // prepend to the messagGrid the new message
    $parent.prepend($message);

<强>演示：

$('#submit').on('click', function(e) {
    e.preventDefault();

    var $parent = $('#messagesGrid'),
        $form = $('#yourMessage'),
        userMsg = $form.find('#myMessage').val(),
        userName = $form.find('#myName').val();

    if (userMsg === '') {
        return; // do nothing on empty message
    }

    if (userName === '') {
        userName = 'Anonymous'
    }

    // create the message container
    var $message = $('<div>', {
        class: 'message'
    });

    // message container's 1st child `the message`
    var $row1 = $('<div>', {
        class: 'send grid__col grid__col--4-of-6'
    }).append(
        $('<p>', { // append a <p> element of value user message
            text: userMsg
        })
    );

    // message container's 2nd child `the user`
    var $row2 = $('<div>', {
        class: 'send grid__col grid__col--2-of-6'
    }).append(
        $('<p>', { // append a <p> element of value user name
            text: userName
        })
    );

    // append both rows to message container
    $message.append($row1, $row2);

    // prepend to the messagGrid the new message
    $parent.prepend($message);

    // do sockets here
});

form * {
    display: block;
}

.message:nth-child(odd) {
    background: #939393;
    color: white;
}

.message:nth-child(even) {
    background: #6e6e6e;
    color: white;
}

.btn-container * {
    display: inline-block;
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messages">
    <div class="grid" id="messagesGrid">
        <div class="message">
            <div class="send grid__col grid__col--4-of-6">
                <p>*Static welcome text*</p>
            </div>
            <div class="sender grid__col grid__col--2-of-6">
                <p>*from whoever*</p>
            </div>
        </div>

    </div>
</div>

<form id="yourMessage">
    <label for="message">Message:
        <textarea name="message" id="myMessage" cols="60" rows="5"></textarea>
    </label>
    <label for="user">User:
        <input type="text" id="myName" name="user" value="">
    </label>

    <div class="btn-container">
        <button id="submit" type="submit">
            Send
        </button>
    </div>

</form>