Setting new value for an attribute using jQuery

javascript jquery html attr

189,700

Solution 1

Works fine for me

See example here. http://jsfiddle.net/blowsie/c6VAy/

Make sure your jquery is inside $(document).ready function or similar.

Also you can improve your code by using jquery data

$('#amount').data('min','1000');

<div id="amount" data-min=""></div>

Update,

A working example of your full code (pretty much) here. http://jsfiddle.net/blowsie/c6VAy/3/

Solution 2

It is working you have to check attr after assigning value

LiveDemo

$('#amount').attr( 'datamin','1000');

alert($('#amount').attr( 'datamin'));

189,700

Author by

Sakshi Sharma

Updated on January 16, 2020

Comments

Sakshi Sharma over 4 years
I am trying to set a new vale of a custom attribute of a div using attr(). I found out it can be done using .attr( attributeName, value ), but when I try it it's not working.

Here is the part of my code I am interested in:
```
$('#amount').attr( 'datamin','1000')
```
and the div that has the custom attribute is
```
<div id="amount" datamin=""></div>
```
Here is the whole example:
```
$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: <?php echo $min_val;?>,
        max: <?php echo $max_val;?>,
        values: [ <?php echo $min_val;?>, <?php echo $max_val;?> ],
        slide: function( event, ui ) {
            $( "#amount" ).html( "<?php echo $currency_chk_i;?>" + ui.values[ 0 ] + " - <?php echo $currency_chk_i;?>" + ui.values[ 1 ] );

            $('#amount').attr( 'datamin','1000');

        },
        change: function(event, ui) {
            // when the user change the slider
        },
        stop: function(event, ui) {
        alert(ui.values[0]);
            // when the user stopped changing the slider

        }
    });
    $( "#amount" ).html( "<?php echo $currency_chk_i;?>" + $( "#slider-range" ).slider( "values", 0 ) +
        " - <?php echo $currency_chk_i;?>" + $( "#slider-range" ).slider( "values", 1 ) );

});
```
Can anyone point out where I am wrong or any other way out?
- Mitya almost 12 years
  
  Are you trying to use HTML5 data attributes?
- Joseph Marikle almost 12 years
  
  Seems to work: jsfiddle.net/Gm9D2
- Waihon Yew almost 12 years
  
  What does "not working" mean exactly?
- Sakshi Sharma almost 12 years
  
  actually it a part of my code . i think i should put up my whole code it not working in tht
- ninja almost 12 years
  
  You should use html5's new data attribute instead, which will give you valid markup. It works like this: <div id="amount" data-nameofdata=""></div> and JS: $('#amount').data('nameofdata', new value);
- Sakshi Sharma almost 12 years
  
  posted full code .its not working in the code
- Blowsie almost 12 years
  
  try putting alert($('#amount').attr( 'datamin')); straight after $('#amount').attr( 'datamin','1000'); you can test the event fires as expected and if the code has done its job
- Blowsie almost 12 years
  
  where / why are you udsing this data min anyway? your code doesn't show what you are actually setting it for
- Sakshi Sharma almost 12 years
  
  yes i tried , i use firebug and tested in chrome too the value is empty
- Sakshi Sharma almost 12 years
  
  i am using to to pass the min and max value of the jquery ui silder into custom attributes .
- Blowsie almost 12 years
  
  post an online example of your full code, in jsfiddle or similar
- Sakshi Sharma almost 12 years
  
  hey guys i got it working i was putting the code inside the slide function thats why it ws not working , thanks all of u for helping out , atleast i got know the new data() thing . :)
- Blowsie almost 12 years
  
  the code works indie the slide function for me , see my example and answer
- Blowsie almost 12 years
  
  please close / accpet an answer
Sakshi Sharma almost 12 years

thanks i would have needed this too in writing my code further hehehehe :)
A.J. over 9 years

What about to set multiple attr in one call?
Adil over 9 years

$( "#greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" }); check details here, api.jquery.com/attr
Ayaz Shah over 8 years

@Adil do you have any idea for this stackoverflow.com/questions/34311726/…