Question

我正在尝试设置一个jQuery插件，该插件的选项之一是使用选择器和find之类的方法的jquery对象

这是一个使用https://learn.jquery.com/plugins/basic-plugin-creation/

上的“ greenify”教程的精简示例

(function ( $ ) {

  $.fn.greenify = function( options ) {

    // This is the easiest way to have default options.
      var settings = $.extend({
        // These are the defaults.
        backgroundColor: "white"
      }, options );

    // Greenify the collection based on the settings variable.
      return this.each(function(){
        $(this).find(settings.target).css({
          backgroundColor: settings.backgroundColor
        });
      });

  };

}( jQuery ));


$(".target").greenify({
  target: $(".something").eq(1).find(".another"),
  backgroundColor: "red"
});

.target * {
padding: 10px;
margin: 10px;
background: blue;
border: 4px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">
target

  <div class="something">
  something
    <div class="another">another</div>
  </div>

  <div class="something">
  something
    <div class="another">another</div>
  </div>

  <div class="something">
  something
    <div class="another">another</div>
  </div>

</div>

<div class="target">
target

  <div class="something">
  something
    <div class="another">another</div>
  </div>

  <div class="something">
  something
    <div class="another">another</div>
  </div>

  <div class="something">
  something
    <div class="another">another</div>
  </div>

</div>

<div class="target">
target

  <div class="something">
  something
    <div class="another">another</div>
  </div>

  <div class="something">
  something
    <div class="another">another</div>
  </div>

  <div class="something">
  something
    <div class="another">another</div>
  </div>

</div>

我在做什么错了？

Answer 1

您要将选择器传递给插件，然后对其进行评估should（在插件的上下文中）。

问题是jQuery首先评估您的选择器，然后将结果传递给插件，这样您就可以得到任何结果（在您的情况下，因为您使用了eq(1) ）。您的$(this)可以正常工作，只是已过滤了输入到插件中的数据。

我也仔细阅读了您提供的文章，但是在那里他们仅传递了一组元素（通过选择器），然后在这种情况下进行了一些处理，在我看来，这也是您应该做的。

Answer 2

是否可以将目标更改为选择器字符串而不是jQuery对象？ .eq(1)的使用是针对整个DOM进行选择的，因此仅'.somtehing'中的第一个会被匹配。

如果您这样称呼：

$(".target").greenify({
  target: '.something:eq(1) .another',
  backgroundColor: "red"
});

那应该做你想要的。

另一种方法是改为使用:nth-child：

$(".target").greenify({
  target: $('.something:nth-child(2)').find('.another'),
  backgroundColor: "red"
});

请注意，第n个子索引为1，而不是0。

使用链式选择器和方法作为jquery插件中的选项，对此感到困惑，$（this）范围

2 个答案: