Question

我无法弄清楚如何定位一个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 add class＆＃34; open＆＃34;到上面例子中的markup_zz项目编号为3。

将markup_zz视为父级，将markup_zzz视为子级。如果有一个子添加类对父开放。

这是我到目前为止所做的：

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

但这只适用于第一级。

我无法改变跨度，因此必须以其他方式完成。

Answer 1

我认为没有直接的功能/选择器来实现您的要求。如果其类符合要求，则需要搜索 - 在特定项目旁边的每个项目。

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

这里有点狙击手。单击跨度以激活每个元素的查找。

＆＃13;

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

＆＃13;

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

＆＃13;

------------------编辑------------------

Execute a function when the document is ready

知道如何自动执行函数后，使用.each()迭代元素或数组。

看看这个jsFiddle。

如果是span class＆＃34; markup_zzz＆＃34;来自span class＆＃34; markup_zz＆＃34;添加课程

1 个答案: