Javascript jQuery清理还是更好的方法

我有下面这个长脚本，我知道可以写得更好。我们有一个非常重JS的站点，我需要用JS更改元素，这就是我下面的内容。但我知道这可以用不同的书写方式来提高效率。我不太擅长JS，这就是为什么它写得这么长的原因

任何帮助都会很好

        <script type="text/javascript">
           jQuery(document).ready(function() {
           var html = $("#tab7 a").html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           jQuery("#tab7 a").html(html);
           jQuery("#tab7 a").css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
        });
        </script>
        <script type="text/javascript">
           jQuery(document).ready(function() {
           var html = $("#tab9 a").html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           jQuery("#tab9 a").html(html);
           jQuery("#tab9 a").css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
        });
        </script>

        <script type="text/javascript">
           jQuery(document).ready(function() {
           var html = $("#tab10 a").html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           jQuery("#tab10 a").html(html);
           jQuery("#tab10 a").css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
        });
        </script>

jQuery（文档）.ready（函数（）{
var html=$（“#tab7 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
jQuery（“#tab7a”）.html（html）；
css（{“行高”：“16px”，“文本对齐”：“中心”，“填充顶部”：“29px”，“高度”：“49px”）；
});
jQuery（文档）.ready（函数（）{
var html=$（“#tab9 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
jQuery（“#tab9a”）.html（html）；
css（{“行高”：“16px”，“文本对齐”：“中心”，“填充顶部”：“29px”，“高度”：“49px”）；
});
jQuery（文档）.ready（函数（）{
var html=$（“#tab10 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
jQuery（“#tab10a”）.html（html）；
css（{“行高”：“16px”，“文本对齐”：“中心”，“填充顶部”：“29px”，“高度”：“49px”）；
});

最好将其简化为一个处理程序，为所有项目使用一个公共类

    jQuery(document).ready(function() {
       $(".tab a").each(function() {
           var html = $(this).html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           $(this).html(html);
       });
    });

jQuery（文档）.ready（函数（）{
$（“.tab a”）。每个（函数（）{
var html=$（this.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（this）.html（html）；
});
});

然后将以下CSS应用于页面：

<style type="text/css">
.tab a {
    line-height:16px;
    text-align:center;
    padding-top:29px;
    height:49px;
}
</style>

.表a{
线高：16px；
文本对齐：居中；
填充顶部：29px；
高度：49px；
}

---

这样，每个

元素在

class='tab'

元素中都将具有相同的样式，并且jQuery代码将显著缩短，因为jQuery将自动找到与参数匹配的每个元素，并使用

迭代它们。每个
方法并应用更改。
这样会更好要将其简化为单个处理程序，请为所有项目使用公共类

    jQuery(document).ready(function() {
       $(".tab a").each(function() {
           var html = $(this).html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           $(this).html(html);
       });
    });

jQuery（文档）.ready（函数（）{
$（“.tab a”）。每个（函数（）{
var html=$（this.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（this）.html（html）；
});
});

然后将以下CSS应用于页面：

<style type="text/css">
.tab a {
    line-height:16px;
    text-align:center;
    padding-top:29px;
    height:49px;
}
</style>


.表a{
线高：16px；
文本对齐：居中；
填充顶部：29px；
高度：49px；
}

这样，每个
元素在
class='tab'
元素中都将具有相同的样式，并且jQuery代码将显著缩短，因为jQuery将自动找到与参数匹配的每个元素，并使用
方法对其进行迭代。每个
方法并应用更改。
，而无需重写下面是一些建议：

将JS放在单独的JS文件中
您不需要用多个
块分隔JS，也不需要多个ready函数
在一致性方面，使用jQuery或$，而不是两者都使用
因为代码正在被复制，所以使用循环并替换相应的值
在一个单独的.js文件中（减去循环），它看起来像这样：

$（函数（）{
var html=$（“#tab7 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（#tab7 a”）.html（html）；
$（“#表7 a”）.css({
“线高”：“16px”，
“文本对齐”：“居中”，
“填充顶部”：“29px”，
“高度”：“49px”
});
html=$（“#tab9 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（#tab9 a”）.html（html）；
$（“#表9 a”）.css({
“线高”：“16px”，
“文本对齐”：“居中”，
“填充顶部”：“29px”，
“高度”：“49px”
});
html=$（“#tab10 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（#tab10 a”）.html（html）；
$（“#tab10 a”）.css({
“线高”：“16px”，
“文本对齐”：“居中”，
“填充顶部”：“29px”，
“高度”：“49px”
});
});
在不完全重写脚本的情况下，以下是一些建议：

将JS放在单独的JS文件中
您不需要用多个
块分隔JS，也不需要多个ready函数
在一致性方面，使用jQuery或$，而不是两者都使用
因为代码正在被复制，所以使用循环并替换相应的值
在一个单独的.js文件中（减去循环），它看起来像这样：

$（函数（）{
var html=$（“#tab7 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（#tab7 a”）.html（html）；
$（“#表7 a”）.css({
“线高”：“16px”，
“文本对齐”：“居中”，
“填充顶部”：“29px”，
“高度”：“49px”
});
html=$（“#tab9 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（#tab9 a”）.html（html）；
$（“#表9 a”）.css({
“线高”：“16px”，
“文本对齐”：“居中”，
“填充顶部”：“29px”，
“高度”：“49px”
});
html=$（“#tab10 a”）.html（）.split（“”）；
html=html[0]+“
”+html.slice（1.join（“”）；
$（#tab10 a”）.html（html）；
$（“#tab10 a”）.css({
“线高”：“16px”，
“文本对齐”：“居中”，
“填充顶部”：“29px”，
“高度”：“49px”
});
});
顺便说一句，你不应该把我分开
 $(function() {
    $(".tab-link").each(function(){
       var html = $(this).html.split(" ");
       html = html[0] + "<br/>" + html.slice(1).join(" ");
       $(this).html(html);
       $(this).css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
    });
 });