选择子div的文本

Posted 2023-05-09

【中文标题】选择子div的文本

【英文标题】：Selecting text of child div

【发布时间】：2018-01-20 04:25:29

【问题描述】：

我有以下场景，如下图所示

我用文本“task1”编辑了任务 将文本更改为“task2” 新文本“task2”出现在屏幕上。

但是我无法获取已编辑的文本并将其存储在变量中。

如何使用 jquery 从 div id="taskDiv" 的子 div 中选择文本（在这种情况下为 task2）？

代码javascript：

$(".list_of_items").on("click", "button.edit", function ()
        event.preventDefault();
        var myText = $(this).closest("div.text_holder").text();
        var textBox = "<div id='taskDiv'><form class='edit_input_box'><input type='text' value='" + myText + "' class='itembox'></form></div>";
        var deleteButton = "<button class='delete btn btn-danger btn-sm'><span class='glyphicon glyphicon-trash'></span></button>";
        var editButton = "<button class='edit btn btn-success btn-sm'><span class='glyphicon glyphicon-pencil'></span></button>";
        var twoButtons = "<div class='btn-group'>" + deleteButton + editButton + "</div>";

        var textToSend = $(this).closest("div.text_holder").replaceWith(textBox); //replace with new word written 

        $("form.edit_input_box").on("submit", function()
            var checkBox = "<label><input type='checkbox'></label>";
            //var noteId = $(this).closest("li").attr("id"); //take unique note id
            //sendUpdatedNoteToDb(noteId,textToSend);
            $(this).replaceWith("<div>" + $(".itembox").val() + twoButtons + "</div>");
        ); 

代码 html：

<div class="form-inline">
                <h1>Learning jquery</h1>
                <form role="form" id="main_input_box_dub2az">
                    <label> <input type="text" class="form-control"
                        id="txtField_dub2az" name="Item" placeholder="Site note:"
                        aria-describedby="name-format" required> <input
                        type="submit" value="Add" id=btnAdd_dub2az
                        class="btn btn-primary add_button">
                    </label>
                </form>
                <div>
                    <ol class="list-group list_of_items" id="dub2az"></ol>
                </div>
                <div class="container">
                    <div id="container" class=".col-xs-6 .col-sm-4"></div>
                </div>
            </div>

【问题讨论】：

请编辑您的问题并添加您的代码而不是此屏幕截图。

还添加 javascript 以显示您到目前为止所尝试的内容。

截图读起来很痛苦，请做笔或小提琴

试用$('#taskDiv').find('div').text();

按要求添加代码

【参考方案1】：

试试 $('#taskDiv > div:nth-child(1)').text();如果您有许多 div 作为#taskDiv 的子项