如何使用jQuery prevAll()选择附近的文本节点?

时间:2022-10-31 17:52:03

I'm getting a text node (node.nodeType == 3) returned from the getSelection range, eg.:

我得到一个文本节点。nodeType == = 3)从getSelection范围返回,例如:

var selectionRange = selection.getRangeAt(0);
var startContainer = selectionRange.startContainer;

This startContainer usually is a text node, eg the following html:

这个startContainer通常是一个文本节点,例如下面的html:

<p>Paragraph in <u>parag</u>raph.</p>

Would result in the text node with text "raph." if | denotes the selection:

如果|表示选择:

<p>Paragraph in <u>parag</u>r|aph|.</p>

That's right, the selected text is aph and the text node is raph., because before raph there is a new text node inside the u node.

没错,选中的文本是aph,文本节点是raph。,因为在raph之前,u节点中有一个新的文本节点。

Now, when calling $(startContainer).prevAll().each(function(index, node) ... I expected this to return U (which contains a text node with parag) and another text node (which contains Paragraph in ).

现在,当调用$(startContainer).prevAll()。每个(函数(指数(节点)……我期望它返回U(包含带parag的文本节点)和另一个文本节点(包含段落)。

However, it returns only U and not the text node to the left of it.

但是,它只返回U,而不返回它左边的文本节点。

Why is this? How do I get all same-level nodes before my startContainer, including text nodes with jQuery?

这是为什么呢?如何在我的startContainer(包括使用jQuery的文本节点)之前获得所有相同级别的节点?

2 个解决方案

#1


4  

In general, jQuery is about manipulating the elements of the DOM. It goes out of its way (most of the time, the .text() function being an obvious exception) to ignore text nodes, especially in the family of "DOM Navigation" functions.

一般来说,jQuery是关于操作DOM元素的。它不去理会文本节点(大多数情况下,.text()函数是一个明显的例外),特别是在“DOM导航”函数家族中。

Here is an older * question that might help you put together some code to find text nodes. As you see in that question, the jQuery .contents() function does include text nodes. Thus, you can do something like go up to the parent of your text node and get its contents that way, then from that set of children you can "find yourself" and determine immediate neighbors, etc.

这里有一个较老的*问题,它可以帮助您组合一些代码来查找文本节点。正如您在这个问题中看到的,jQuery .contents()函数确实包含了文本节点。因此,您可以做一些事情,比如到文本节点的父节点,以这种方式获取其内容,然后从该子节点集合中您可以“找到自己”并确定直接的邻居,等等。

#2


6  

Thanks to Pointy, who's answer I accepted, I came up with the following:

由于Pointy,我接受了他的回答,我想到了以下几点:

var left = true;
                        var leftNodes = [];
                        var rightNodes = [];
                        $(startContainer).parent().contents().each(function(index, node) {
                            if (!left) { //right
                                rightNodes.push(node);
                            }
                            else if ((node.isSameNode(startContainer)) && (left)) {
                                left = false;
                            }
                            else { //left
                                leftNodes.push(node);
                            }
                        });

#1


4  

In general, jQuery is about manipulating the elements of the DOM. It goes out of its way (most of the time, the .text() function being an obvious exception) to ignore text nodes, especially in the family of "DOM Navigation" functions.

一般来说,jQuery是关于操作DOM元素的。它不去理会文本节点(大多数情况下,.text()函数是一个明显的例外),特别是在“DOM导航”函数家族中。

Here is an older * question that might help you put together some code to find text nodes. As you see in that question, the jQuery .contents() function does include text nodes. Thus, you can do something like go up to the parent of your text node and get its contents that way, then from that set of children you can "find yourself" and determine immediate neighbors, etc.

这里有一个较老的*问题,它可以帮助您组合一些代码来查找文本节点。正如您在这个问题中看到的,jQuery .contents()函数确实包含了文本节点。因此,您可以做一些事情,比如到文本节点的父节点,以这种方式获取其内容,然后从该子节点集合中您可以“找到自己”并确定直接的邻居,等等。

#2


6  

Thanks to Pointy, who's answer I accepted, I came up with the following:

由于Pointy,我接受了他的回答,我想到了以下几点:

var left = true;
                        var leftNodes = [];
                        var rightNodes = [];
                        $(startContainer).parent().contents().each(function(index, node) {
                            if (!left) { //right
                                rightNodes.push(node);
                            }
                            else if ((node.isSameNode(startContainer)) && (left)) {
                                left = false;
                            }
                            else { //left
                                leftNodes.push(node);
                            }
                        });