jQuery — объединение пользовательских функций в цепочку

Мне интересно, как связать мои пользовательские функции и поддерживать контекст «этого».

Пример:

$.fn.foo = function() {
  var html = '<div class="foo"></div>';
  if ($(this).hasClass(somthing) {
    $(this).prepend(html);
  }
}

$.fn.bar = function() {
  var html = '<h3>bar</h3>';
  $(this).find('.foo').prepend(html);
}

$('body').foo().bar();

Когда я пытаюсь использовать этот код, я получаю TypeError: Cannot read property 'bar' of undefined


javascript jquery method-chaining
person Frederick M. Rogers    schedule 23.06.2016    source источник

Ответы (3)


arrow_upward
14
arrow_downward

Вам нужно вернуть текущий контекст элемента, т.е. this из вашего пользовательского метода.

$.fn.foo = function() {
  var html = '<div class="foo"></div>';
  if ($(this).hasClass('somthing')) {
    $(this).prepend(html);
  }
  return this; //The magic statement
}

$.fn.bar = function() {
  var html = '<h3>bar</h3>';
  $(this).find('.foo').prepend(html);
  return this; //The magic statement
}

$('body').addClass('somthing').foo().bar();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

person Satpal    schedule 23.06.2016

arrow_upward
4
arrow_downward

Возврат this:

$.fn.foo = function() {
    var html = '<div class="foo"></div>';
    if ($(this).hasClass(somthing) {
        $(this).prepend(html);
    }
    return this;
};

$.fn.bar = function() {
    var html = '<h3>bar</h3>';
    $(this).find('.foo').prepend(html);
    return this;
};

$('body').foo().bar();
person eisbehr    schedule 23.06.2016

arrow_upward
2
arrow_downward

Возможно, вам нужна функция jQuery extend. Это позволяет вам создать список функций, разделенных запятыми, которые вы можете использовать в цепочках выражений.

jQuery.fn.extend({
  check: function() {return this.each(function() { this.checked = true; });} ,  
  uncheck: function() {return this.each(function() { this.checked = false;  });
  }})

Использование: это проверяет все флажки:

$( "input[type='checkbox']" ).check();

(пример взят из https://api.jquery.com/jquery.fn.extend/< /а> )

person Francis    schedule 28.03.2019