Changing an Element's Id with Jquery

Changing an element's ID with jQuery

Your syntax is incorrect, you should pass the value as the second parameter:

jQuery(this).prev("li").attr("id","newId");

jQuery update element id

Yes there is a way to change any attribute.

$('#your_element').attr('id','the_new_id');

Then again, this is definitely not recommended and it is also a pretty bad practice. You can however use classes for the same functionality.

$('.my_class').removeClass('my_class').addClass('normal_element');

If you tell me what you need to do I will help you out with a solution.

Using JQuery to change element ID

Try to use the proper signature of .attr('attributeName','value'),

$('#tag').attr("id","newId")

Change id of an input with jquery

Because it is not a function it's a property, you would change it like so:

input.id = IdTd;

when using jQuery:

input.attr('id', IdTd);

Jquery listener for change of element id

It's not possible with a listener because no event occurs. You'd have to periodically check the ID with a setInterval function or similar. Better, tie into the function that changes the ID with a callback.

Changing element Id at run time Jquery

Your ID selector is incorrect. Right now it will look for elements with the tagname as "addToCartButton_"+id. If id is 5, it would look for elements like <addToCartButton_5>...</addToCartButton_5>

It should instead be:

$("#addToCartButton_"+id).attr('id','addToCartButton_'+code); 
   ^ ID selector

changing element id with jQuery not work for my function

So there are a couple of parts to my answer, bear with me:

(1) The reason it isn't working right now is because when you run $("#hide").click(function() { ..., there aren't yet any elements on the page with the hide id, so the function doesn't get set to run anywhere. One method you can use to get around this is to do the following:

$(".hiddendiv").on('click', '#hide', function() {
   ...
});

By attaching the click event handler instead to the parent div, whenever the parent sees that the event occurred in a child div with the id of hide, it will run the function on that child div.

(2) You shouldn't be using IDs here. If at some point you have more than one button that needs this functionality on you're page, you'll be in trouble, since an ID should only be used once per page. A class would work much better in this scenario. Then you can do something like:

$(".hiddendiv").on('click','.show', function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $(".show").addClass('hide').removeClass('show');
});

(3) Finally, it works! But, if we add another hiddendiv to the page, we find that when we click one, it updates all of them. We can fix that by using this. When the function is triggered, the this keyword will refer to the element that you clicked (either with the show or hide class. We can take advantage of that and do the following:

$(".hiddendiv").on('click','.show', function () {
    $(this).parent().animate({
        top: "-=250"
    }, "slow");
    $(this).addClass('hide').removeClass('show');
});

$(".hiddendiv").on('click','.hide', function () {
    $(this).parent().animate({
        top: "+=250"
    }, "slow");
    $(this).addClass('show').removeClass('hide');
});

---

Related Topics