Как предварять селектор только в первом матче?

Question

Используя медиа-запросы, я создал навигационную панель, которая сворачивается, а мой логотип находится внизу. С enquire.js я добавлял последний li. Как я могу выполнить prepend только в первом совпадении, чтобы предотвратить переключение одного li, каждое совпадение вправо?

prependLogo : function() {

        query = "screen and (max-width: 979px)";
            handler = {
                match: function() {
                    $(.nav-collapse .nav).prepend($("li:last"));
                },

                unmatch : function() {

                },
            };

            enquire.register(query, handler);
    },

Answer 1

Есть два подхода к решению этой проблемы. Одним из них является использование Enquire's unregister метод. Другой заключается в использовании setup обратный вызов и deferSetup флаг.

setup обратный вызов вызывается только один раз. Обычно он вызывается сразу после регистрации запроса, но в сочетании с deferSetup флаг, установка откладывается до первого совпадения запроса (к сожалению, inquire ожидает, что всегда будет match обратный вызов, поэтому мы просто предоставим пустую функцию для этого):

enquire.register("screen and (max-width: 979px)", {
  setup : function() {
    $(.nav-collapse .nav).prepend($("li:last"));
  },
  deferSetup : true, 

  match : function() {}
});

unregister Метод делает, как вы могли ожидать, отменить регистрацию запроса. Если мы позвоним unregister из нашего обратного вызова мы можем достичь того же эффекта:

enquire.register("screen and (max-width: 979px)", {
  match : function() {
    $(.nav-collapse .nav).prepend($("li:last"));
    //note this unregisters *all* handlers for this mq (if you have more than one) 
    enquire.unregister("screen and (max-width: 979px)"); 
  }
});

Вот рабочий пример, демонстрирующий два подхода: http://codepen.io/WickyNilliams/pen/vFLEH

Кроме того, обратите внимание, что в приведенном выше коде вы не используете var ключевое слово для инициализации ваших переменных. Это плохая практика в JS, потому что любая переменная, объявленная без var привязан к глобальной области видимости, что, вероятно, не то, что вы хотите:)