Changing Dom Element in Li without reloading?

Question

I somehow got trouble finding a way to change the Dom Element of Li Object according to the Votes.

So a user could Upvote an Link and if the Link got more Upvotes then another it should go up until it has less then the next higher one basiclly.

Here the Html Code :

    <li>
    <span><span class="icon icon"></span><a href="http://"         
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button>+</button><span id="displayCount">(0).  
    </span></div>
    </li>

    <li>
    <span><span class="icon icon2"></span><a href="http://" 
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button>+</button><span id="displayCount">(0). 
    </span></div>
    </li>

And the Js:

    $('button').click(function () {
    var newCount = parseInt($('#displayCount').text()) + 1;
    $('#displayCount').text(newCount);
    });

So the Button does Count, however I can't figure out how to actually change the li with Icon 2 if the count is higher above the Li with Icon, without reloading the Page. How am I able to do this?

Cheers,

Julian

do you mean to rearrange the order of the `li` based on the count? — atmd, Jul 20 '15 at 14:16
possible duplicate of [Sort an html list with javascript](http://stackoverflow.com/questions/8837191/sort-an-html-list-with-javascript) — Abhitalks, Jul 20 '15 at 14:17

score -3 · Answer 1 · answered Jul 20 '15 at 14:23

    <li>
    <span><span class="icon icon"></span><a href="http://"         
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button class="add">+</button><span class="displayCount">(0).  
    </span></div>
    </li>

    <li>
    <span><span class="icon icon2"></span><a href="http://" 
    rel="nofollow" target="_blank">Name</a> </span>
    <div class="right"><button class="add">+</button><span class="displayCount">(0). 
    </span></div>
    </li>

$('button.add').click(function () {
    var $element = $(this).parent().find('.displayCount:first');
    var newCount = parseInt($element.text()) + 1;
    $element.text('('+newCount+')');
});

Changing Dom Element in Li without reloading?

1 Answers1