Блог

Главная - Вопросы по программированию - объединить инструкции jQuery

объединить инструкции jQuery

#jquery #jquery-selectors

#jquery #jquery-селекторы

Вопрос:

У меня выдался какой-то неважный день, и я пытаюсь придумать способ уменьшить это, но все, что я пробовал, не сработало. Я знаю, что должен быть лучший способ сделать это, поэтому я решил спросить здесь.

Любые советы по кэшированию jQuery тоже были бы хороши (я пытаюсь сделать как можно меньше около 225 строк jQuery, чтобы все могло помочь!

 $(".tableMap td:nth-child(1)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(2)").css("text-align","center").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(3)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(4)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(5)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(6)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(7)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(8)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-bottom:1px solid black;");

Извините за мой ужасный код, не стесняйтесь давать мне любые советы, которые вы можете придумать!

Джефф

Комментарии:

1. какого результата вы ожидаете, также я бы использовал .css, а не .attr для всех itmes

2. В основном 1, 3-8 одинаковы. 2 и 9 отличаются. Итак, я хочу в основном сделать из них 2 инструкции, в которых они охватывают диапазон n-го дочернего элемента для них (если это возможно). Я не знаю, как создавать диапазоны n-го дочернего элемента, поэтому мне пришлось сделать 9 инструкций. Я знаю, что должен быть лучший способ, который просто не приходит мне в голову.

Ответ №1:

Просто примените класс CSS со своими стилями границ ко всем ячейкам (для этого jquery вообще не нужен):

 <style>
  .tableMap td
  {
    border: 1px solid black;
    border-left: none;
    border-top: none;
  }
</style>

Затем, впоследствии, вы можете применить свои специфические стили только к двум необходимым элементам:

 $(".tableMap td:nth-child(2)").css("text-align","center");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-right:none;");

Хорошо бы помнить, что следует использовать javascript / jQuery только тогда, когда вам это нужно. Используйте прямой HTML / CSS всякий раз, когда можете, так ваш сайт будет работать намного лучше.

Ответ №2:

непроверенный — но я думаю, вы понимаете, к чему я клоню…

 $(".tableMap td:nth-child(1)").attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td").children().lt(9).gt(1).attr("style","border-right:1px solid black; border-bottom:1px solid black;");
$(".tableMap td:nth-child(9)").css("text-align","center").attr("style","border-bottom:1px solid black;");

Ответ №3:

похоже, что если вы сделаете

 $(".tableMap td").attr("style","border-right:1px solid black; border-bottom:1px solid black;");

затем

 $(".tableMap td:nth-child(2),.tableMap td:last").css("text-align","center");

это было бы намного проще