javascript - 在鼠标向下和向上时获取动态生成的子 div 的索引值

Question

我正在处理生成动态 DOM 结构的页面，并且该 DOM 中的 div 包含文本。我想创建一个 jQuery 或 JavaScript 函数，以便当用户从页面中选择一些文本时，包含文本的 div 的索引应该存储在鼠标按下和鼠标按下事件的变量中。我创建了以下小提琴，它是我想要的原型，但我希望我的函数更通用，即在任何 pageContainer 中，当用户选择它应该给我初始 div 索引和最终 div 索引的文本时。DOM结构中只有带有id查看器的div不是动态的另一件事是动态的

这是小提琴链接

和我页面的 DOM 结构：

<div id="viewer">
    <div id="pageContainer1" >
        <canvas id="page1" ></canvas>
        <div class="textLayer">
            <div>......some text here....</div>
            <div>......some text here....</div>
            <div>......some text here....</div>
        </div>
    </div>

    <div id="pageContainer2" >
        <canvas id="page2" ></canvas>
        <div class="textLayer">
            <div>......some text here....</div>
            <div>......some text here....</div>
            <div>......some text here....</div>
        </div>
    </div>

    <div id="pageContainer3" >
        <canvas id="page3" ></canvas>
        <div class="textLayer">
            <div>......some text here....</div>
            <div>......some text here....</div>
            <div>......some text here....</div>
        </div>
    </div>
</div>