Question

我有这个“ getter”函数，它返回一个元素：

var getElements = function(selector) {
    return $(selector);
  },
  button = getElements('button');

console.log(button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  console.log(button.length); // expected: '2'; result: '1';
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

如何使getter函数识别动态添加的元素？

Answer 1

到目前为止，所有答案都是正确的。执行重新查询。如果您想要一个真正的“ getter”，如问题和评论所建议，请使用getter。看来这就是您要达到的目标。

class x {
  get button() {
    return $("button")
  }
}

const instance = new x

console.log(instance.button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  //after append call again
  console.log("after append--", instance.button.length); // expected: '2'; result: '1';
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Answer 2

动态的...您也需要刷新功能

var getElements = function(selector) {
    return $(selector);
  },
  button = getElements('button');

console.log("intial length---", button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  //after append call again
  button = getElements('button');
  console.log("after append--", button.length); // expected: '2'; result: '1';
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Answer 3

动态添加按钮后，按钮变量不会更新。只需替换

eventManager

与

console.log(button.length);

Answer 4

您已经在只有1个匹配元素的情况下设置了变量“按钮”，然后在添加另一个元素之后再次检查同一变量的长度。您应该在添加新元素后刷新该变量。

var getElements = function(selector) {
    return $(selector);
  },
  button = getElements('button');

console.log(button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  // refresh the variable
  button = getElements('button');
  console.log(button.length); // expected: '2'; result: '1';
}, 3000);

Answer 5

您可以将button变量视为已缓存的DOM查询结果。您必须重新查询DOM以获取与搜索条件匹配的新元素。就您而言，您可以始终使用getElements('button').length来获取最新的按钮数量。

Answer 6

如@PrriyanshiSrivastava所述，“变量保存旧的静态数据”。您必须更新它们。。这是一种无需再次调用$('button')的方法。

var $buttons = $('button');

console.log($buttons.length);

setTimeout(function() {
  var $newBut = $('<button>Another Button</button>'); // Create new button
  $('#banner-message').append($newBut); // Append it
  $buttons.push($newBut); // Add it to the array without researching the DOM
  console.log($buttons.length); // expected: '2'; result: '1';
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

Answer 7

使用Functions Getter

使长度动态

var getElements = function(selector) {
    return {
      get length() {
        return $(selector).length
      }
    };
  },
  button = getElements('button');

console.log(button.length);

setTimeout(function() {
  $('#banner-message').append('<button>Another Button</button>');
  console.log(button.length); // expected: '2'; result: '1';
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <button>Buttton</button>
</div>

函数找不到动态添加的元素

7 个答案: