How to DRY my jQuery code in a single line

StackOverflow https://stackoverflow.com/questions/16967995

Pergunta

This is what I am trying to achieve -

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.

Below code is working fine, however I want to target prev & next in a single shot instead of targeting it separately, let me know how could i achieve this in single line of code.

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

My Code -

<!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>
Foi útil?

Solução

If you just care about one-lining it, you could do:

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

If you want more clarity, I would do:

$("li:contains(Deep Inner Product 3)").prev().addClass('prev').end().next().addClass('next');
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top