Question

我认为在选择元素时我误解了一些东西。

我有以下查询：

$('#my_id_1 #my_id_2').my_function();

<form id="my_id_1">
  <input id="my_id_2" type="text" />
</form>

我虽然my_function()只会在my_id_2“在”my_id_1内时触发。

但该功能也会在我有my_id_2而非my_id_1的其他网页上触发。

谁能告诉我这里缺少什么？

代码更新

$('#my_form #country').my_func().autosuggest_country();


(function () {
  // "Namspace" which also kind of works like an interface
  $.fn.my_func = function(opt) {
    this.autosuggest_country = autosuggest.autosuggest_country ;
    return this;
  }


  var autosuggest = {
    autosuggest_country : function(action) {
      $(this).autocomplete({ (...) });
    }
  }
})(jQuery);

Page 1

<form id="my_form" class=""  method="post" onsubmit="return false;">
  <input id="country" type="text" autocomplete="off"  required="required" />
</form>

第2页

<div id="mainSection" class="mainGrid">

  <div class="selectCountry">
    <select id="country" name="selectlist_country"> (...) </select>
  </div>
</div>

Answer 1

您当前的代码块将创建与选择器'#my_id_1 #my_id_2'匹配的所有内容的jQuery选择对象，然后将jQuery方法my_function()应用于该选择器。无论选择对象是否为空，都将调用该方法，因为该对象仍然拥有所有jQuery方法。

jQuery中有一个方法，用于为选择中的每个元素运行一次代码块。这是.each()方法。这应该适用于您正在做的事情，因为ID应该只在页面上出现一次（因此'#my_id_1 #my_id_2'应该只对应一个DOM元素。）

要实现这一点，您将使用如下代码，具体取决于my_function是jQuery方法还是函数。

常规功能：

$('#my_id_1 #my_id_2').each(my_function());

jQuery方法：

$('#my_id_1 #my_id_2').each($(this).my_function());

这会为$（'＃my_id_1＃my_id_2'）中的每个元素调用my_function()一次，该元素应为零次或一次。在my_function的范围内，this将对应于两种情况下选择中的元素。

编辑：编辑，因为评论现在无效。

你应该可以这样做：

$('#my_form #country').each(
    $(this).my_func().autosuggest_country()
)

您要做的是将my_func()应用于$('#my_form #country')中的每个元素（如果选择器为空，则不执行任何操作），因此我们在this内使用jQuery选择器.each()。 this是DOM元素，而不是DOM的jQuery选择器，因此我们需要使用$(this)来访问jQuery方法。然后，您可以使用标准方法链接this上的方法（由my_func()返回）。

请参阅this fiddle。

Answer 2

始终执行函数my_function。它是否具有以下语法：

$.fn.my_function = function(){
    return this.each(function(){

    });
}

如果您不使用this.each，只需执行您的代码即可。它将永远执行！ .each确保它遍历所选元素。

Answer 3

ID 应该在任何页面上都是唯一的。

$('#my_id_1 #my_id_2')首先不需要。

Just $('#my_id_2').my_function()应该这样做。

因此，如果您只想定位您正在谈论的特定页面上的实例，那么请提供input a class name instead.

<form id="my_id_1">
  <input class="my_id_2" type="text" />
</form>

现在这只会在您期望的页面上启动

$('#my_id_1 .my_id_2').my_function();

或更好

`$('.my_id_2', '#my_id_1').my_function();`

jQuery选择器中的两个ID不起作用

3 个答案: