jquery permanently alter html

How would I go about permanently add a class to a html element using jQuery.

I am planning on building a image gallery that is sorted into types/categories using the jQuery sorting plugin. I want to add a dropdown box below each image that allows the user to change the type (add/remove class) which permanently changes the HTML for next load. How would I go about this?

EDIT: Ok 开发者_运维知识库so from what I can put together I should use this approach:

1. Jquery add/removes class.
2. Send full HTML of source via AJAX request.
3. PHP writes full HTML to file or is there a way to replace only a particular part of a file in PHP?

You could use jQuery's ajax functionality to send back edited HTML to the server to be stored in your database after the user has made their changes.

You can then build up the relevant parts of your page from your database on the next load.

$('#mySelectBox').change(function(){
$.ajax({
  url: "updateHtml.php",
  data: $('#myEditedHtmlContainer').html(),
  success: function(){
    // do something on success
  }
});
});

You first need to know the distinction between Client side scripting and Server side programming.

The server will return you a set of html on each response which is generated by the server side php in your case.

If you want to modify a class on a certain element, and you want this change to survive the next generated server side php response, you need to somehow inform the server of your change.

There are several options to send data from the client side to the server side.

1. Store the value in a hiddenfield
2. Make an ajax request and store the value somewhere on the server so it is aware of this change at the request.
3. Add it to the querystring of the url being requested.

One solution is to store user decision in cookie. The during very page load, you'll need to check for the appropriate value in the cookie and based on it apply the CSS.