jQuery 问题：我如何清理这段代码以提高效率，或者有没有办法循环这个？答案

【问题标题】：jQuery question: How do I clean this code to be more effeciant, or is there a way to loop this?jQuery 问题：我如何清理这段代码以提高效率，或者有没有办法循环这个？
【发布时间】：2011-04-18 07:36:57
【问题描述】：

这是我的代码，它会一直重复到 :eq(15)。一般来说，我是 jQuery 和 JavaScript 的新手，我怀疑我这样做是否正确。谁能帮我把这段代码清理成一个循环？我基本上需要这个脚本将 :eq(0) 增加 1 直到 15。

var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"><span>';

$("ul.side-block-content li:eq(0)").mouseenter(function(){$('ul.side-block-content li:eq(0) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(0) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(0)").mouseleave(function(){$('ul.side-block-content li:eq(0) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(0) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(1)").mouseenter(function(){$('ul.side-block-content li:eq(1) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(1) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(1)").mouseleave(function(){$('ul.side-block-content li:eq(1) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(1) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(2)").mouseenter(function(){$('ul.side-block-content li:eq(2) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(2) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(2)").mouseleave(function(){$('ul.side-block-content li:eq(2) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(2) .article-title a').text()+'</span>');});  

$("ul.side-block-content li:eq(3)").mouseenter(function(){$('ul.side-block-content li:eq(3) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(3) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(3)").mouseleave(function(){$('ul.side-block-content li:eq(3) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(3) .article-title a').text()+'</span>');});

$("ul.side-block-content li:eq(4)").mouseenter(function(){$('ul.side-block-content li:eq(4) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(4) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(4)").mouseleave(function(){$('ul.side-block-content li:eq(4) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(4) .article-title a').text()+'</span>');});

$("ul.side-block-content li:eq(5)").mouseenter(function(){$('ul.side-block-content li:eq(5) .article-title a span').replaceWith($titleMarquee+$('ul.side-block-content li:eq(5) .article-title a').text()+'</span></marquee>');});

$("ul.side-block-content li:eq(5)").mouseleave(function(){$('ul.side-block-content li:eq(5) .article-title a marquee').replaceWith('<span>'+$('ul.side-block-content li:eq(5) .article-title a').text()+'</span>');});

提前致谢。

【问题讨论】：

你能提供一些 HTML 吗？
</marquee>。你先生是魔鬼。
我以为很久以前就被弃用了。
@Krule：我认为marquee 从未出现在任何实际规范中。它不会出现在 HTML 2.0、3.2 或 4.01 规范中（显然不会出现在 HTML5 中）。
真的吗？！所有这些很棒的答案都没有被接受？

标签： jquery loops digit

【解决方案1】：

for (i = 1; i <= 15; i++) {
    $("ul.side-block-content li:eq(" + i + ")").mouseenter(function() {
        var $this = $(this);
        $this.filter('.article-title a span').replaceWith(
        $titleMarquee + $this.filter('.article-title a').text() + '</span></marquee>');
    }).mouseleave(function() {
        var $this = $(this)
        $this.filter('.article-title a marquee').replaceWith('<span>' + $this.filter('.article-title a').text() + '</span>');
    });
}

附：我不确定这是否可行 - 需要查看您的 HTML。（不知道$titleMarquee里面是什么，为什么第一次replace没有打开<span>）

【讨论】：

“P.S. 稍后我会发布整个代码” 嗯，好的。所以基本上你只是想确保你得到第一个答案？因为您遗漏的是回答问题的中心。
真的很快，谢谢！ $titleMarquee 是这样的： var $titleMarquee = '';我应该用一些东西替换 $this 吗？或按原样使用，因为它似乎不起作用。
@Innuendo：你真的不想创建一个名为 $this 的全局变量，对吗？
我让它工作了！谢谢所有回答我问题的人。
@T.J. Crowder：我通常总是创建 $this 变量。但是是的，在这个例子中，最好像你在答案中那样创建变量

【解决方案2】：

看起来所有这些语句都做同样的事情，只是针对不同的列表项。假设这是正确的，您可以这样做：

$("ul.side-block-content li").hover(
    function(){
        var link = $(this).find(".article-title a"),
            span = link.find("span");
        span.replacewith($titleMarquee + link.text() + '</span></marquee>');
    },
    function(){
        var link = $(this).find(".article-title a"),
            marquee = link.find("marquee");
        marquee.replaceWith('<span>' + link.text() + '</span>');
    }
);

hover 是将函数连接到mouseenter 和mouseleave 的快捷方式。在每个函数中，this 将引用 li 元素本身，因此如果我们将它包装在一个 jQuery 对象中，我们可以使用 find 来查找它的后代。看起来您主要使用链接的内容，因此代码找到该链接，然后找到span（在mouseenter）或marquee（在mouseleave）并将其替换为包含链接文本的 marquee 或 span。

【讨论】：

【解决方案3】：

试试这个：

$('ul.side-block-content').delegate('li', 'mouseleave', function() {
    $a = $(this).find('.article-title a');
    $a.filter('span:first').replaceWith($titleMarquee + $a.text()
                                        + '</span></marquee>');
});

【讨论】：