无法获取函数来调整窗口大小

Question

So, I have the following jQuery code:

$(function() {
    var lastElement = false;
    $("ul li").each(function() {
        if (!lastElement || lastElement.offset().top == $(this).offset().top) {
            // add slash
            $(lastElement).after(' /');
        }
        lastElement = $(this);
    })
});

Basically it will add slashs after every li element, with the exception that if the li is the last in the line it will not add slash. I tried to use this same function to resize, but when the window is resized, it adds several slashs without removing the other.

Here is a fiddle: http://jsfiddle.net/W2ULx/23/

Any idea? Thanks...

Answer 1

Instead of changing the content directly

you can try to control the class

for example:

$(lastElement).addClass('hasSlash');

http://jsfiddle.net/W2ULx/25/

Answer 2

Additionally to the answer of Ian Wang (and referring to your comment):

You can, of course, use pure CSS for doing this job:

li:not(:last-of-type):after{
    content:" / ";
}

The problem(?) is that you will have to remove the unwanted slashes manually using media queries:

@media screen and (max-width:500px) {
    li:nth-of-type(3n):after {
        content:"";
    }
}

I'm not sure if it's better to use JavaScript or CSS. I think I'd prefer the CSS solution.