How to Get Id from class selector

Question

<input  id="1" class="Find">
<input  id="2" class="Find">
<input  id="3" class="Find">

$('.Find').autocomplete('auto/data.php?mode='+ $('.Find').attr('id')  +'', {    
                    width: 220,
                    max: 5,
                    selectFirst: false,      
                    mustMatch:true,
                    formatItem: function(data, i, n, value) {return  value.split("|")[0];}
                    });

In this case the code $('.Find').attr('id') only shows the first array. Not showing the specific id where I needed.

I've done to change with new var n change this line $('.Find').attr('id') with new variable but the result is undefined .

The new var look like this var one = $("#GetObjc").attr("value");

Can anyone help me. What should I do to get the specific id on that class. Sorry if am make confuse cozz am newbie.

Answer 1

I'm not sure what you looking for. but you can get all id s using .each .

var ids ='';
$(".Find").each(function( index, value ) {
  ids += $(this).attr('id') + ',';
});

Then you can split ids variable or something like this.

Check JSFiddle Demo

In your case i think it's useful for you:

$('.Find').each(function() {
    var $this = $(this);
    $this.autocomplete('auto/data.php?mode='+ $this.attr('id')  + '', {    
        width: 220,
        mzx: 5,
        selectFirst: false,      
        mustMatch:true,
        formatItem: function(data, i, n, value) {return  value.split("|")[0];}
    });
});

Answer 2

2% chance I understood your question in the right way but it seems that you need to iterate through your element list:

    $('.Find').each(function() {
        $(this).autocomplete('auto/data.php?mode='+ $(this).attr('id')  +'', {
            width: 220,
            max: 5,
            selectFirst: false,      
            mustMatch:true,
            formatItem: function(data, i, n, value) {return  value.split("|")[0];}
        });
    });

Answer 3

I think you want to do this :

$('.Find').each(function() {
    var $this = $(this);
    $this.autocomplete('auto/data.php?mode='+ $this.attr('id')  + '', {    
        width: 220,
        mzx: 5,
        selectFirst: false,      
        mustMatch:true,
        formatItem: function(data, i, n, value) {return  value.split("|")[0];}
    });
});

$('.Find').attr('id') will always return the id of the first .Find in the page. So you can't use it like this.

Answer 4

$('.Find') return an array of all DOM elements (wrapped in jquery) that got a 'Find' class.

You can access each element with [] operator - like $('.Find')[0] , or iterate trough the array with for lop. To get the id of the element use the id property.

To sum up - $('.Find')[0].id - id of the first element

Answer 5

I'm not sure if i get what you want but i suppose you want to autocomplete all inputs with data from different urls based on the of the input, if so you can do this:

$('.Find').each(function(){
  $(this).autocomplete('auto/data.php?mode='+ $(this).attr('id')  +'', {    
                width: 220,
                max: 5,
                selectFirst: false,      
                mustMatch:true,
                formatItem: function(data, i, n, value) {return  value.split("|")[0];}
  });
})

to get the id, in the each just do:

$(this).attr('id') or $(this).prop('id')

Answer 6

In order to have a dynamic data source you need to set a function() as your source.

Also, the this attribute does not return the actual DOM element , rather than a more rich object that (of course) contains the actual elemet.

So, to achieve what you want you can try the following:

$('.Find').autocomplete({    
    source: function(request, response) {
        var id = this.element[0].id;
        var url = 'auto/data.php?mode='+ id;
        jQuery.getJSON(url, response).error(function () { /* handle JSON error */ }); 
    },
    width: 220,
    max: 5,
    selectFirst: false,      
    mustMatch:true,
    formatItem: function(data, i, n, value) {return  value.split("|")[0];}
});