javascript - Getting an Uncaught TypeError -

I have the following code, everything except this line is okay I'm not sure that I'm unkuit on this line Why is a type error error

this.find ('iframe'). material (). ('Body'). 'Background-color', settings.color);

Especially console.log (this) outputs the element correctly. I'm a jQuery novice, so maybe this is something I'm not seeing.

  jQuery (document) .ready (function ($) {$ ('div [data-name * =' form_background_colour "] input .wp-picker-clear '). () {$ (this) .setDefaultFormEditorBackground ();});}); JQuery.fn.extend ({setDefaultFormEditorBackground: function (options) {var settings = jQuery.extend ({color: ""}, options); var $ colorpicker_input = this; var $ bgcolor_div = $ colorpicker_input.closest ( 'div [data -name * = "form_background_colour"]); $ bgcolor_div.nextAll (' [data-type = "wysiwyg"]: Lieutenant (2) ") . each (function () {console.log (this); console.log ($ Colorpicker_input); this.find ( 'iframe'). contents (). ( 'Body') .css ( 'background-color', settings .color); $ colorpicker_input.closest ('.wp-picker-container') .Find ('.wp-color-result'). CSS ('Page This user's background color ', settings.color);});}});    
 
 
  In this ,  each ()  callback will have these elements themselves, not their jQuery cover. 
 
 You need to do this: 
 
  jQuery (this) .find ('iframe'). material (). ('Body') Search Css ('background -color', settings.color);