如何仅在第一次匹配时添加选择器？答案

【问题标题】：How to only prepend selector only on first match?如何仅在第一次匹配时添加选择器？
【发布时间】：2013-12-03 00:15:45
【问题描述】：

使用媒体查询，我创建了一个可折叠的导航栏，而我的徽标位于底部。使用 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);
    },

【问题讨论】：

标签： jquery media-queries enquire.js

【解决方案1】：

有两种方法可以解决这个问题。一种是利用查询的unregister 方法。另一种是利用setup 回调和deferSetup 标志。

setup 回调只被调用一次。通常在注册查询时立即调用它，但结合deferSetup 标志，设置会延迟到第一次匹配查询（不幸的是，查询期望总是有一个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 声明的任何变量都附加到全局范围，这可能不是你想要的:)

【讨论】：