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

DEMO

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');

在zepto中与班级一起获得下一个兄弟姐妹

2 个答案: