CODEWITHSUNDEEP
jquery
Sam Hammamy
Sam Hammamy

Reputation: 11017

Some JQuery code shortcuts

I'm writing a lot of JQuery code recently that seems to repeat itself and I'm wondering if there are any shortcuts for the following:

1) Selecting multiple elements by name, i.e.

$("input[type=text][name=one][name=two][name=three]").live(); <-- is that correct syntax

2) Multiple live bindings, i.e.

$("input[type=text]").live('blur and click',function(){});

Thanks

Edit:

I've also got this use case, where I want to flip display on multiple elements, I found this on this forum, but I haven't tested it yet. Here's my impl and I'd welcome feedback on the strategy

$("#btn_account_edit").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        false,true);
});
$("#btn_account_edit_cancel").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        true,false);
});

   

function flip_display_on_off($element_set1,$element_set2,flip1,flip2) {
    var display1 = 'block' ? if flip1 : 'none';
    var display2 = 'none' ? if flip2 : 'block';
    for (i =0; i < element_set1.length; i++) {
        $element_set1[i].css('display',display1);
    }
    for (i =0; i < element_set2.length; i++) {
        $element_set2[i].css('display',display2);
     } 
}

Second Edit:

This is the final version of the code, tested and works perfectly! Thanks to @thecodeparadox

$("#btn_account_edit").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        true);
});

$("#btn_account_edit_cancel").live('click',function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        false);
});

function flip_display_on_off($element_set1, $element_set2, flip1) {
    $element_set1.css('display', flip1 ? 'block' : 'none');
    $element_set2.css('display', flip1 ? 'none' : 'block'); 
}

Upvotes: 2

Views: 89

Answers (4)

thecodeparadox
thecodeparadox

Reputation: 87073

Answer to your question : 01

To select different selector they need to be separated by comma, read more about jQuery Selectore

$("#container").on('click', ":text[name=one], :text[name=two], :text[name=three]", function() {

});

is correct.

Answer to your question : 02

for multiple live event bind event name should be separated by comma also. Read more about jQuery events.

In case of live event binding, we shouldn't use live because its deprecated. Instead of that we need to use .on().

// here #container is the parent of input[type=text]
// which is already exits in DOM

$("#container").on("blur click", "input[type=text]", function(){

});

There is another option for live event delegation called .delegate(). It implement like following:

$("#container").delegate("input[type=text]", "blur click", function(){

});

According to comment

Want to send array of input fields as parameter of a function

function handlerToInputs(inputParams) {
  var filter = inputParams.join(', ');
  $("#container").on("blur click", filter, function(){

  });
}

// on checkbox click you execute a function with inputs
// if checkbox needs delegate event then
// bind live event like above

$(':checkbox').on('click', function() {
  hadlerToInputs([":text[name=one]", ":text[name=two]", ":text[name=three]"]);
});

According to Edit

$("#some_container").on('click', #btn_account_editfunction(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        false,true);
});
$("#some_container").on('click',"#btn_account_edit_cancel", function(){
    flip_display_on_off(
        $("#btn_account_edit_cancel, #btn_account_save, #account_edit_form"),
        $("#btn_account_edit, #account_edit_static"),
        true,false);
});

function flip_display_on_off($element_set1, $element_set2, flip1, flip2) {

    // making flip for first set of elements
    $element_set1.css('display', flip1 ? 'block' : 'none');

    // making flip for second set of elements
    $element_set2.css('display', flip2 ? 'block' : 'none');

}

NOTE I think you don't need any loopy.

I hope you get all answers. Happy coding :(

Upvotes: 5

Šime Vidas
Šime Vidas

Reputation: 186003

I'd use a function to filter the inputs:

$( 'input:text' ).filter(function () { 
    return /one|two|three/.test( this.name ); 
})

Live demo: http://jsfiddle.net/rhKBy/

Upvotes: 0

Elias Zamaria
Elias Zamaria

Reputation: 101143

The first thing you are trying to do will not work. You can do it reasonably concisely like this:

$("input[type=text]").filter("[name=one], [name=two], [name=three]").live();

If you have a large number of names, you may be able to do it even more briefly like this:

$("input[type=text]").filter(function() {
    return $.inArray(["one", "two", "three"], $(this).attr("name")) !== -1;
}).live();

For the second thing, you can do this:

$("input[type=text]").live("blur click", function() {
});

Keep in mind that the live function is deprecated. It is recommended that you use delegate or on instead.

Here is an example with delegate:

$(document).delegate("input[type=text]", "click", function() {
    if ($.inArray(["one", "two", "three"], $(this).attr("name")) !== -1) {
        // handle the event here
    }
});

Upvotes: 2

bhamlin
bhamlin

Reputation: 5197

As for #2, you don't need the word and in there. jQuery binding can take multiple events, just space delimited.

Upvotes: 1

Related Questions