根据兄弟元素的前一个类动态添加Class()？

Question

我有一个包含<li>的<ul>元素。列表项可以是以下之一:

<li class="folder"> 
<!-- or... -->
<li class="file">

在每个文件夹内部，都有一个名为color-label的标签。

<li class="folder">
    Folder 1 
    <i class="blue"></i>
</li>

我需要使用jQuery动态查找所有的<li class="folder">列表项，并找到<i class="color">标签，然后将类应用于每个<li class="file">兄弟项，直到它找到下一个文件夹颜色标签，然后重复此过程，直到所有<li>都具有正确的颜色，具体取决于文件夹的color-label类。

这是一个示例： 我已经尝试使用.nextUntil() jQuery方法，但效果不佳。以下是我的代码： https://jsfiddle.net/5c11sqL5/

<nav class="directory">
    <h1 class="title">Directory</h1>
    <ul class="container">
        <!-- Folder 1 -->  
        <li class="folder">Folder 1 <i class="blue"></i></li>
        <li class="file">File 1</li>
        <li class="file">File 2</li>
        <li class="file">File 3</li>

        <!-- Folder 2 -->  
        <li class="folder">Folder 2 <i class="green"></i></li>
        <li class="file">File 1</li>
        <li class="file">File 2</li>
        <li class="file">File 3</li>

        <!-- Folder 3 -->  
        <li class="folder">Folder 3 <i class="gray"></i></li>
        <li class="file">File 1</li>
        <li class="file">File 2</li>
        <li class="file">File 3</li>
    </ul>
</nav>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Courier New", Courier, monospace;
}

/* Directory */

.directory {
    display: flex;
    flex-direction: column;
    background: #ccc;
    width: 240px;
    height: 100vh;
}

.directory .title {
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .07;
    text-align: center;
    margin: 1rem 0 0;
}

.directory .container {
    list-style: none;
}

/* Folder and Files */

.folder {
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    padding: 0 0 0 1rem;
    margin: 1rem 0 0;
}

.file {
    font-size: .8rem;
    padding: 0 0 0 1rem;
}

/* Colors */

.blue,
.green,
.gray {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    display: block;
}

.blue {
    background: rgba(0, 194, 224, 1);
}

.green {
    background: rgba(81, 232, 152, 1);
}

.gray {
    background: rgba(131, 140, 145, 1);
}

- Oneezy

---

Rory McCrossan 的解决方案是正确的。如果我是你，我会更改 HTML 布局，使 li.folder 具有嵌套的 <ul> 和嵌套的 li.file，这样您就可以轻松选择文件夹中的文件，如 $('li.folder').each(function(folder) { var files = $('li.file', folder), className = $('i', folder).prop('class'); files.addClass(className) })。 - Rudolf Gröhling

我完全同意！唯一的问题是，HTML 是为我正在制作的 Trello 扩展动态编写的。 "Trello 列表" 是目录，而 "Trello 卡片" 则是文件夹或文件：http://oneezy.com/www/gtd/trello-directory.png 。卡片可以拖放，并且与许多 "Trello" 相关的东西绑定在一起，因此我必须非常小心地处理 DOM 操作的数量。 - Oneezy

Answer 1

你可以通过循环遍历每个元素，然后将其类名复制到后面的每个.file中来实现此目的，代码如下：

$('.directory .folder i').each(function() {
    var className = $(this).prop('class');
    $(this).closest('li').nextUntil('.folder').addClass(className);
})

需要注意的是，您需要修改已定义的类，以便position: absolute规则仅适用于元素，代码如下：

i.blue,
i.green,
i.gray {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 5px;
    display: block;
}
i.blue {
    background: rgba(0, 194, 224, 1);
}
i.green {
    background: rgba(81, 232, 152, 1);
}
i.gray {
    background: rgba(131, 140, 145, 1);
}

.file.blue {
    color: rgba(0, 194, 224, 1);
}
.file.green {
    color: rgba(81, 232, 152, 1);
}
.file.gray {
    color: rgba(131, 140, 145, 1);
}

Updated fiddle

- Rory McCrossan

---

为什么要为相同的颜色创建两个规则？您可以只创建.color，因为您指定绝对元素是i.color。 - Sotiris

太好了！我感激你的帮助。 - Oneezy

@Sotiris 因为 i.colour 设置了 background，而 .file.colour 设置了 color。 - Rory McCrossan

@Oneezy 没问题，很高兴能帮助。 - Rory McCrossan