1

これは私が達成しようとしていることです -

「Deep Inner Product 3」に対して「Deep Inner Product 2」と「Deep Inner Product 4」を対象とし、上をブルー、下をティールで色付けします。

以下のコードは正常に動作していますが、前と次を個別にターゲットにするのではなく、1 回のショットでターゲットにしたいので、1 行のコードでこれを実現する方法を教えてください。

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

1 に答える 1