javascript - 检查元素数量 jQuery

Question

我想获取给定表格单元格中 textarea 元素的数量。使用它，我想一​​次向一个元素添加删除功能，当且仅当有两个以上元素时，并且如果我单击“撤消”链接，还能够撤消已删除的 textarea 。以下是示例片段:

<table class="result_table">
    <tr valign="middle" align="center">
        <td style="font-size:13px; " class="tbody_data side">Dissolution</td>
        <td valign="middle" align="center" style="padding: 0px;" class="tbody_data">
            <input type="hidden" value="2" name="tests[]">
            <textarea style="border:none; vertical-align: middle;" class="det_st form-control">UV</textarea>
        </td>
        <td style="padding: 0px;" class="tbody_data">
            <textarea style="border:none;" class="det_st form-control">USP 38 NF 33 Page 4635</textarea>
        </td>
        <td style="padding: 0px;" class="tbody_data">
            <textarea style="border:none;" class="det_st form-control">Acid Stage Not more than 10.0% [n=6]
            </textarea>
            <textarea style="border:none;" class="det_st form-control">Buffer Stage Not Less than 70.0% [n=6]
            </textarea>
        </td>
        <td style="padding: 0px;" class="tbody_data">
            <textarea style="border:none;" class="det_st form-control"> Acid Stage 107.8% (RSD=5.2%; n=6) </textarea>
            <textarea style="border:none;" class="det_st form-control"> Buffer Stage 102.2% (RSD=0.9%; n=6)</textarea>
        </td>
        <td style="padding: 25px;  width:50px;" class="tbody_data side">
            <select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
            </select>
            <select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
            </select>
        </td>
    </tr>
</table>

$(document).on('mouseover', '.result_table tr td', function() {
    $('textarea', this).dblclick(function() {
        $(this).remove()
      alert( $(this).length) //gives one even when a cell contains two teatareas
    });
})

欢迎提出建议。

Answer 1

您想要计算 td 单元格内 textareas 的数量，并使其能够在以下情况下将其删除:

1. td 单元格内有 2 个或更多 textarea。
2. 用户双击textarea。

您还希望能够通过将之前删除的 textareas 放回到 DOM 中来撤消操作。

您应该使用.detach()而不是.remove()。这样您就可以存储已删除的元素以供进一步使用(您的撤消)。

这里是带有注释的代码解释 - 在标记上我刚刚添加了一个按钮以使其可以进行撤消操作:

$(function() {
    // Initialize an array to store all the removed textareas.
    var removedTextAreas = [];    

    $(".result_table tr td").on("mouseover", function() {
        // How many textareas within this cell?
        var numberOfTextAreas = $("textarea", this).length;

        // Handle the double click event.
        handleDblClick(numberOfTextAreas, this);
    });

    $("#undo").on("click", function() {
        // Is there anything removed and not undone?
        if (removedTextAreas.length > 0) {
            // The undo goes from the last to the first in the list.
            // We always re-attach the last one that has been removed.
            var itemPos = removedTextAreas.length - 1;
            var reAttach = removedTextAreas[itemPos];
            var previous = reAttach.previous;
            var next = reAttach.next;

            if (previous.length > 0) {
                // The removed element had a sibling before it,
                // so let's append it back after this sibling.
                reAttach.textarea.appendTo(reAttach.cell);
            }
            else {
                // The removed element had a sibling after it,
                // so let's append it back before this sibling.
                reAttach.textarea.prependTo(reAttach.cell);
            }

            // We now can remove this item from the list of
            // removed textareas.
            removedTextAreas.splice(itemPos);
        }
    });

    // Let's separate concerns by creating a function.
    // This way you can also reduce the code within the caller.
    function handleDblClick(numberOfTextAreas, el) {
        // The target for the double click.
        var target = $("textarea", el);

        // Let's unbind the double click to start with.
        target.off("dblclick");

        // Two or more textareas?
        if (numberOfTextAreas >= 2) {
            target.on("dblclick", function() {
                // Let's store the removed textarea and some details
                // to identify its current parent and siblings.
                removedTextAreas.push({
                    cell: $(this).closest("td"),
                    previous: $(this).prev("textarea"),
                    next: $(this).next("textarea"),
                    textarea: $(this).detach()                    
                });
            });
        }        
    }
});

Demo

注意:您可能需要稍微调整一下确定重新附加元素的位置的部分，但我确信您已经明白了。