spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

How to write a jquery plugin that works with multiple elements?


I'd suggeset:

(function ($) {
    $.fn.colify = function () {
        // return the results of calling the
methods for chaining,
        // note that 'this' refers to the jQuery
collection (not DOM nodes):
        return this.css("color", function () {
            // using the anonymous function
available to 'css()',
            // this here refers to the individual
DOM node over
            // which jQuery is iterating in CSS():
            return $(this).data('color');

        });
    }
})(jQuery);
$('a').colify();

JS Fiddle demo.

Although you don't need to invoke jQuery, or use data(), within the css() call, you could simply use HTMLElement.dataset to access the data-* attributes:

(function ($) {
    $.fn.colify = function () {
        return this.css("color", function () {
            // this.dataset.color returns the
attribute value from 'data-color',
            // if that returns undefined (or a
falsey value) 'black' is used instead:
            return this.dataset.color || 'black';

        });
    }
})(jQuery);

JS Fiddle demo.

Or this.getAttribute('data-color') could be used (which is likely useful to support older browsers) in place of this.dataset.color (JS Fiddle demo).

References:


Categories : Jquery

Related to : How to write a jquery plugin that works with multiple elements?
How to write Jquery .keyup function on elements that are loaded by Ajax
Well, $('#length_imp').on attaches no handler since there is no #length_imp when you run it. You can attach the listener to the document and check if the target is #length_imp $(document).on( 'keyup', '#length_imp', function () { var val1 = 2.54 * $("#length_imp").val(); $("#length_cm").val(val1); } ); Fiddle

Categories : Jquery
jquery prevent multiple instances of plugin
The plugin's demo page clears the chart and reinitialises it as follows : $('#exampleSimple').html(''); $('#exampleSimple').jqbargraph({ data: arrayOfData }); .empty() should also work. You probably want - function showChart(chartData) { $('#chart').empty().jqBarGraph({ data: chartData, width: 200, height: 300 }); }

Categories : Javascript
Jquery: get the ids of multiple file elements in an array
I don't know how your exact plugin works, but I would try the following, it should give you an array of all the ids of the file inputs on your page: $('input[type="file"]').toArray().map(function(item) { return item.id; ); Here's a runnable sample: var ids = $('input[type="file"]').toArray().map(function(item) { return item.id; }); alert(ids); <script src="https://ajax.googleapis.com/

Categories : Javascript
Can't access jquery plugin's external function when plugin created inside event
I found the solution so I will just post it here for future reference: var coverCanvasObj = null; var divContainer = $('<div/>'); coverCanvasObj = divContainer.testClass({ option1:2, option2:tru }); So I just needed to access the testClass object outside the render/container Div.

Categories : Jquery
Write and Delete elements from JSON file in Node
If you are already reading in the JSON file with fs.readFile and store the JSON string in a variable, you need to parse the JSON string, modify the parsed object, and then convert it back into a JSON string and write back with fs.writeFile I haven't tested this, but roughly: var fs = require('fs'); fs.readFile('pathToJSONData.json', function(err, data) { var obj = JSON.parse(data); obj.resta

Categories : Json
Recently Add
Update notifications via Ajax
Revert a jQuery function, from xml to html and back
How do I make auto zoom with jquery
Kendo Datepicker inside Kendo Grid Tabstrip - Invalid Template
Force data-ajax="false" on a redirect, or on a certain page load
check if an element has data attribute attached to it?
JQuery Autocomplete Reduce Suggestions
If input value = "word"
Hide a field each time an input from a specified form is changed
Cross domain AJAX Request with Sinatra not working - sending JSON with jQuery.ajax
How to Iterate Enumerable List using Razor and check whether it contains a textbox value
jquery file upload plugin file upload without refreshing the page
Chosen-rails for active admin form
make inner div wider than the outer div
reponsive menu not working when i use variables
npm jquery, which is the correct one to support older browsers
How to find out which side the mouse enter in RTL
Check if Youtube video ID match else load a new video id
unable to use two sliders together
Jquery Select on select
Issue in Calling WebService by jquery Ajax
bootstrap multiselect : TypeError: $(...).multiselect is not a function
Show success or failure message on form.submit()
bootstrap variable grid design layout structure
Add different animate.css class to different divs via a single jquery statement
Changing the image source of a droppable with a draggable image
jquery autocomplete not showing dropdown
Is there another method other than ctrl-p to get print dialog box in datatable print?
how to insert json Data into Sqlite DB in PhoneGap
The toggleClass duration doesn't work on pseudo-elements
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.