如何在一行中干燥我的 jQuery 代码答案

【问题标题】：How to DRY my jQuery code in a single line如何在一行中干燥我的 jQuery 代码
【发布时间】：2013-06-06 17:01:35
【问题描述】：

这就是我想要达到的目标 -

目标“深层内部产品 2”和“深层内部产品 4”相对于 “Deep Inner Product 3”，上一层用蓝色，下一层用蓝色青色。

下面的代码运行良好，但是我想一次性定位 prev 和 next 而不是单独定位它，让我知道如何在单行代码中实现这一目标。

        var chain = $('ul.initial-list').find('ul').eq(1).find('li').eq(2); 
        chain.prev().addClass('prev');
        chain.next().addClass('next');

我的代码 -

<!DOCTYPE html>
<html>
    <head>
        <title>Day 3 - 2</title>
        <style>
        p { font:14px Arial bold;}
        .initial-list {font-size: 18px;}
        li {color:red;}
        .prev {color: blue;}
        .next {color: teal;}
        </style> 
    </head>
    <body>
        <p>Target "Deep Inner Product 2" & "Deep Inner Product 4" relative to "Deep Inner Product 3" and color upper one with blue and lower with teal.</p>
        <ul class="initial-list">
            <li>Product 1</li>
            <li>Product 2</li>
            <li>Product 3</li>
            <li>Product 4</li>
            <li>Product 5</li>
            <ul>
                <li>Inner Product 1</li>
                <li>Inner Product 2</li>
                <li>Inner Product 3</li>
                <ul>
                    <li>Deep Inner Product 1</li>
                    <li>Deep Inner Product 2</li>
                    <li>Deep Inner Product 3</li>
                    <li>Deep Inner Product 4</li>
                </ul>
                <li>Inner Product 4</li>
                <li>Inner Product 5</li>
            </ul>
            <li>Product 6</li>
            <li>Product 7</li>
            <li>Product 8</li>   
        </ul>
        <script src="jquery.js"></script>
        <script>
            var chain = $('ul.initial-list').find('ul').eq(1).find('li').eq(2); 
            chain.prev().addClass('prev');
            chain.next().addClass('next');
        </script>   
    </body>
</html>

【问题讨论】：

ul 中的 ul，真的吗？
@coma 但我们需要 2 更深入！）
是的，ul 不会直接进入 ul 内部。然而，除此之外，当你在做两种不同的动作时，为什么要让它成为一条线呢？您可以稍微收紧第一行上的选择器，但我很难想象接下来的两行会有一个衬里......即使我使用某种zip 功能将所选项目与要添加的类配对并遍历每个添加它们，我不会把所有这些放在一行上。
我觉得这个问题很适合codereview codereview.stackexchange.com
我希望我们可以标记问题以说明它们属于 codereview。

标签： javascript jquery html css method-chaining

【解决方案1】：

如果您只关心单层，您可以这样做：

$('ul.initial-list').find('ul').eq(1).find('li').eq(2).prev().addClass('prev').end().next().addClass('next');'

如果你想要更清楚，我会这样做：

$("li:contains(Deep Inner Product 3)").prev().addClass('prev').end().next().addClass('next');

【讨论】：