如何在一行中干掉我的jQuery代码

时间:2013-06-06 17:01:35

标签: javascript jquery html css method-chaining

这就是我想要实现的目标 -

  

目标“深内在产品2”& “深内在产品4”相对于   “深内产品3”和颜色上部一个用蓝色和下部用   TEAL。

以下代码工作正常,但我想定位prev&接下来只需一次拍摄而不是单独定位,让我知道如何在单行代码中实现这一目标。

        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>

1 个答案:

答案 0 :(得分:3)

如果您只是关心它,可以这样做:

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