zepto - 在zepto中获得下一个兄弟姐妹

Question

通常这不会有问题，但这次我不控制 dom。反正

<dt>foo</dt>
<dd>bar</dd>
<dd>bar
    <div id="myElem">baz</div>
</dd>
<dd>bar</dd>
<dd>bar</dd>
<dd class="moo">bar</dd> <-- I want to get this one
<dd>bar</dd>
<dd>bar</dd>
<dd class="moo">bar</dd>
<dd>bar</dd>
<dd>bar</dd>

这是我尝试过的

$('#myElem').closest('dd').next('.moo').something();
$('#myElem').closest('dd').nextUntil('.moo').something();

然而，这些都没有获得班级的下一个兄弟姐妹。

任何人都知道如何遍历这个？

Answer 1

尝试

$('#myElem').closest('dd').nextAll('.moo:first').something();

或者

$('#myElem').closest('dd').nextUntil('.moo').next().something();

---

我不知道 zepto，但从快速检查文档来看，您似乎无法使用简单的链来完成此操作。尝试

var $dd = $('#myElem').closest('dd');
var $moo = $dd.next();
while (!$moo.is('.moo')){
    $moo = $moo.next();
    if ($moo.length == 0) break;
}

演示

Answer 2

您可以通过创建一个简单的新方法来完成：

/**
* Get the next element of a particular class, relative to a different element.
*/ 
var nextOfClass = function(relativeTo, className) {
    var el = relativeTo, nextEl;

    // Leading period will confuse Zepto. 
    if (className[0] === '.') className = className.slice(1); 

    while (el.next()) {

        // If target element is found, stop
        if (el.hasClass(className)) return el; 

        nextEl = el.next(); 
        if (nextEl.length === 0) {
            // No more siblings. Go up in DOM and restart loop to check parent
            el = el.parent(); 
            continue; 
        }

        el = nextEl;  

         // End of doc. Give up. 
        if (el.parent().length === 0) return false;
    }
};

然后，您可以简单地使用以下方法：

var moo = nextOfClass($("#myElem"), '.moo');