Making simple jQuery function more efficient

Question

I have a function and I know this is not the most efficient way to write it, not only for this function, but for others in the future.

It's the same lines except a number gets += 1 each time its repeated, so I'm sure theres a for, or if, or each way to loop this and reduce the code and increase the maintainability at the same time.

 function lines() {                     
     $('#bottom-1').lazylinepainter( 
     {
        "svgData": pathObj1,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 



      $('#bottom-2').lazylinepainter( 
     {
        "svgData": pathObj2,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 




     $('#bottom-3').lazylinepainter( 
     {
        "svgData": pathObj3,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 



     $('#bottom-4').lazylinepainter( 
     {
        "svgData": pathObj4,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint'); 

     $('#solutions h2').delay( ).animate({opacity:'1'}, 1000, 'easeInQuint')
     }

Alessandro Minoccheri · Accepted Answer · 2013-12-07 18:39:59Z

2

try this:

$('div[id^="bottom-"]').lazylinepainter( 
     {
        "svgData": $(this).data('path'),    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter('paint');

And your div (or your dom element) like this:

<div id="bottom-1" data-path="path1"></div>
<div id="bottom-2" data-path="path2"></div>
<div id="bottom-3" data-path="path3"></div>

answered Dec 7, 2013 at 18:39

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Limon · Accepted Answer · 2013-12-07 18:47:46Z

0

You can try something like this, not optimal but less text:

var svg1 = 0,
    svg2 = 1,
    svg3 = 2;

function test(idTag, svgDataTag, num) {
    for (var i = 1; i <= num; i++) {
        alert('#' + idTag + i); // element id 
        alert(eval(svgDataTag + i)); // svgData object
    }
}

test('button', 'svg', 3);

answered Dec 7, 2013 at 18:47

Limon

806 bronze badges

Comments

Howard Renollet · Accepted Answer · 2013-12-11 13:57:24Z

Here you go. This solution doesn't require that you add any data to your div, or variables for each element that you have. This will loop through every element that starts with "bottom-", pull out the number at the end, and add it to "pathObj". This way, you really don't have to change a lot of code. The only unknown that I have based on your code, is whether or not "pathObj" can be concatenated with the number. If not, then there are ways around this as well that I can help you through.

$("[id^='bottom-']").each(function () {
    var idArray = $(this).attr("id").split("-");
    var idNumber = idArray[idArray.length - 1];
    $(this).lazylinepainter({
        "svgData": pathObj + idNumber,    //only line that changes
        "strokeWidth": 1,
        "strokeColor": "#fff"
    }).lazylinepainter("paint");
})

Since I don't really have any details on what "lazylinepainter" does, I tested my code like this to show an alert with the number that's being pulled from the ID:

<body>
    <div id="bottom-1" />
    <div id="bottom-2" />
    <div id="bottom-3" />
    <script>
        $("[id^='bottom-']").each(function () {
            var idArray = $(this).attr("id").split("-");
            var idNumber = idArray[idArray.length - 1];
            alert(idNumber);
        })
    </script>
</body>

And here's a fiddle that logs the numbers to the console so you can verify:

http://jsfiddle.net/9XZ2L/

If there's any other help you need, please let me know.

Collectives™ on Stack Overflow

Making simple jQuery function more efficient

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related