1

如果我有以下代码：

<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());
});

如果你点击<span> iaculis porttitor</span>它，它会发出警报Mauris。这是正确的行为，但我只想检测prev()元素是否就在当前单击的元素旁边。由于<span> iaculis porttitor</span>is的前一个元素<span>Mauris</span>，这可以正常工作。

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

这在 jQuery 中可能吗？

4

3 回答 3

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/

于 2013-03-07T01:51:19.307 回答
0

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

考虑两个功能（都可能需要调试）：

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 (...)，然后再调用。

因此，您应该保证每个文本片段都包含在<span class="highlight">...</span>or<span class="unhighlighted">...</span>中，并且 jQuery.prev().text()将按照您最初的预期工作。

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

于 2013-03-07T02:56:59.587 回答
0

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

于 2013-03-07T01:50:26.217 回答