jQuery Очистить или лучше [закрыт]

Question

jQuery Очистить или лучше [закрыт]

0

У меня есть этот длинный сценарий ниже, который я знаю, можно писать лучше. У нас есть сайт, который очень тяжелый 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>

Travis 01 окт. 2013, в 16:22

Источник

0

Почему они в отдельных тегах сценария?
Alex W 01 окт. 2013, в 14:10
0

Ну, это не будет более эффективным с точки зрения производительности, но это будет более эффективным с точки зрения обслуживания.
Kevin B 01 окт. 2013, в 14:13
2

Этот вопрос кажется не по теме, потому что речь идет о проверке кода
Stewie 01 окт. 2013, в 21:15

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

4 ответа

1

Не переписывая сценарий полностью, вот несколько советов:

Поместите JS в отдельный JS файл.
Вам не нужно выделять JS с несколькими блоками <script>, и вам не нужно несколько функций готовности.
В терминах согласованности используйте jQuery или $, а не оба
Поскольку код реплицируется, используйте цикл и замените соответствующие значения.

Он будет выглядеть примерно так в отдельном файле.js (минус цикл):

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

    html = $("#tab9 a").html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $("#tab9 a").html(html);
    $("#tab9 a").css({
        "line-height": "16px",
            "text-align": "center",
            "padding-top": "29px",
            "height": "49px"
    });

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

Mark Erasmus 01 окт. 2013, в 12:16

1

Было бы намного лучше сократить это до одного обработчика, используя общий класс для всех ваших предметов

    jQuery(document).ready(function() {
       $(".tab a").each(function() {
           var html = $(this).html().split(" ");
           html = html[0] + "<br>" + 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> с элементом с class='tab' будет иметь один и тот же стиль, а код jQuery будет значительно сокращен, так как jQuery автоматически найдет каждый элемент, который соответствует параметру, и будет проходить через них с использованием метода .each и примените изменения.

Nunners 01 окт. 2013, в 11:37

1

Почему бы не общий класс, а не цикл for, чтобы вас не волновало значение start / stop?
Kevin B 01 окт. 2013, в 14:14
0

Это очень хороший момент, я добавлю в пример для этого.
Nunners 01 окт. 2013, в 14:18

0

Я бы добавил класс к элементам и .each каждый из них методом .each. Он выполняет итерацию через каждый элемент массива, возвращаемый селектором .className.

 $(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"});
    });
 });

JQuery Doc

ExceptionLimeCat 01 окт. 2013, в 12:03

Ещё вопросы

Почему они в отдельных тегах сценария?
Ну, это не будет более эффективным с точки зрения производительности, но это будет более эффективным с точки зрения обслуживания.
Этот вопрос кажется не по теме, потому что речь идет о проверке кода
Почему бы не общий класс, а не цикл for, чтобы вас не волновало значение start / stop?
Это очень хороший момент, я добавлю в пример для этого.

nXqd · Accepted Answer · 2013-10-01T12-39-00.000Z

Кстати, вы не должны разделяться на разные блоки скриптов.

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