javascript - 如何从当前插入符号移至具有特定类名的标签

Question

我正在编写搜索 HTML 的程序。

我使用带有“find”类的 span 标签包裹了搜索关键字，如下所示：

<b><span class="find">A</span>
    <i>B</i>C</b>DDD<b><span class="find">A</span></span><i>B</i>C</b>

单击“下一个”或“上一个”按钮时，我想从当前选择点移动到最近的下一个/上一个跨度标签（我来自window.getSelection()）。

如果"jQuery(selection.focusNode).next('.find');"能用，我就简单解决，但是无效。有什么好的方法吗？

Answer 1

http://jsfiddle.net/sLwuN/

Javascript

$("#prev").click(function(){
    foundElement($(getSelection().focusNode.parentNode).prevAll('.find').first());
});

$("#next").click(function(){
    foundElement($(getSelection().focusNode.parentNode).nextAll('.find').first());
});

function foundElement ($element) {
    if ($element) {
        $element.css('color', 'red');
        setTimeout(function () {
            $element.css('color', 'inherit');
        }, 500);
    }
}

HTML

<span class="find">A</span>
<i>BBBBB</i>
<span class="find">B</span>
<span class="find">CC</span>
<i>CCCCCC</i>
<span class="find">D</span>

<button id="prev">prev</button>
<button id="next">next</button>

Answer 2

也许你可以做这样的事情：

var foo = {
    spans: $('span.find'),
    pos: -1,
    getSpan: function(inc) {
        var pos = this.pos + inc;
        if (pos >= 0 && pos < this.spans.length) {
            this.pos = pos;
            return this.spans[this.pos];
        }
        return undefined;
    },
    next: function() {
        var span = this.getSpan(1);
        // do what you have to do with it
    },
    prev: function() {
        var span = this.getSpan(-1);
        // do what you have to do with it
    },
}

然后“连接” next和prev到您的按钮。

这是您正在寻找的东西？