如果span类"markup_zzz“紧跟在span类"markup_zz”之后，则添加类

Question

我想不出只有当一个span类后面跟着另一个特定的span类时，才能确定它的目标。

例如：

<span class="markup_z">Item one</span>
<span class="markup_zz">Item two</span>
<span class="markup_xx">Item three</span>
<span class="markup_zzz">Item four</span>

我想做一些类似的事情，比如在上面的例子中，如果markup_zz后面跟着markup_zzz，则向markup_zz条目编号3添加类"open“。

可以将markup_zz看作父对象，将markup_zzz看作子对象。如果有子类，则添加对父类开放的类。

这就是我到目前为止所知道的：

$( document ).ready(function() {
$(".markup_z:not(:last-child):has(+ .markup_zz)")
.addClass("open");
});

但这只适用于第一级。

我不能改变跨度，所以它必须以其他方式完成。

Answer 1

我认为没有直接的函数/选择器来实现您所要求的。如果其类别符合要求，则需要搜索特定项旁边的每一项。

.nextAll()和.hasClass()可能就是您要找的。

这里有一个小片段。单击跨度以激活每个元素的查找。

​

$(document).on('click', '.clickable', function() {
        
        // get the classes of the span
        var $classes = $(this).attr('class').split(' ');
        var found = false;
        
        // foreach class
        for (var i = 0; i < $classes.length && ! found; ++i) {
            var current_class = $classes[i];
            if (current_class !== 'clickable') {    // (avoid checking 'clickable')
                
                // add the last letter of the class
                var target_class = current_class + current_class[current_class.length - 1];
                
                // get sibling elements after the clicked one
                var $elems = $(this).nextAll();
                
                // search foreach elem after the clicked one if any of the
                // classes of that element are the target_class
                for (var j = 0; j < $elems.length && ! found; ++j) {
                    var elem = $elems[j];
                    if ($(elem).hasClass(target_class))
                        found = true;
                }
            }
        }
        
        // if the clicked element matches our requirements
        if (found) {
            /*
             * ... do something
             * 
             */
            $(this).css('background-color', 'green');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='margin-bottom:50px;'>
    <span class="clickable markup_a">one</span>
    <span class="clickable markup_aa">two</span>
    <span class="clickable markup_bb">three</span>
    <span class="clickable markup_aaa">four</span>
</div>

​

编辑-

Execute a function when the document is ready

一旦知道如何自动执行函数，就可以使用.each()遍历元素或数组。

看看这个jsFiddle。