Question

如果我有以下代码：

<p>
Suspendisse dictum <span>feugiat</span> nisl ut dapibus. <span>Mauris</span><span> iaculis porttitor</span> posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci.
</p>

您使用以下代码：

$("span").click(function(){
    alert($(this).prev().text());
});

如果您点击 iaculis porttitor，它会提醒Mauris。这是正确的行为，但我只想检测prev()元素是否恰好位于当前单击的元素旁边。由于 iaculis porttitor的上一个元素是Mauris，因此这是正常的。

但是，如果您点击Mauris，它会提醒feugiat，因为这是前一个元素的文字。我想要的是，这将返回false，因为Mauris之前没有元素，只有文本。

这在jQuery中是否可行？

Answer 1

您可以检查previousSibling是否为文本节点

$("span").click(function(){
  if (this.previousSibling){
    if (this.previousSibling.nodeType == 3){
        alert(false);
    }
    else{
        alert($(this.previousSibling).text());
    }
  }
});

http://jsfiddle.net/mowglisanu/PUnce/

Answer 2

使用jQuery是不可能的。您将不得不求助于本机DOM API。在单击的DOM对象上使用previousSibling属性。您可以通过查询其nodeType属性来检查该元素是文本节点还是元素节点。

Answer 3

不确定这是否会有所帮助，但可能会有一些里程。

考虑两个函数（两者都需要调试）：

function unwrapUnhighlighted ($container) {
    $container.find("span.unhighlighted").unwrap();
}

function rewrapUnhighlighted ($container) {
    $container.contents().each(function(){
        if (this.nodeType == 3) {
            $(this).wrap('<span class="unhighlighted" />')
        }
    });
}

现在考虑在插入新的unwrapUnhighlighted(...)范围并在之后调用.highlight()之前调用rewrapUnhighlighted (...)。

因此，应该保证每个文本片段都包含在...或...中，jQuery的.prev().text()将按照您的预期工作。

对于调试，给.unhighlighted一些背景颜色以使类可观察。

检测prev（）项是否紧接在当前元素之前？

3 个答案: