Change HTML attribute with jQuery

Question

I am using jQuery 1.4.4. and I have this source code:

<div id="area1">
    <ul id="testlist" data-filter="false">

    </ul>
</div>

How can I change the data-filter attribute to true in jQuery? I tried for example:

$('#testlist').attr("data-filter").val(true);

but it does not work.

Anyone an idea?

Best Regards.

Answer 1

The syntax for attr is $.attr(attributeName, value); . Try this:

$('#testlist').attr("data-filter", true);

Answer 2

Since you're using jQuery 1.4.4 and "data" attributes, you can use jQuery's .data() method :

Example: http://jsfiddle.net/patrick_dw/SLskn/

alert( $('#testlist').data("filter") ); // alerts "false"

$('#testlist').data("filter",true);

alert( $('#testlist').data("filter") ); // alerts "true"

From the docs:

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.

Answer 3

You're using the wrong syntax. Try this:

$('#testlist').attr("data-filter", true);

Answer 4

Try this:

$('#testlist').attr("data-filter", "true");

Or possibly

$('#testlist').attr("data-filter", true);

Answer 5

$('#testlist').attr("data-filter",true);

http://api.jquery.com/attr/

Answer 6

Try $('#testlist').attr("data-filter", "true"); instead

Answer 7

The correct usage of .attr is .attr(name, value)

So change your code to

$('#testlist').attr("data-filter", true);

http://api.jquery.com/attr/

Answer 8

So you're using the HTML5 syntax for custom attributes... Nice.

There is a jQuery metadata plugin that allows you to access those attributes in a more semantic way. Just use it like this:

// Reading:
var tooltipTitle = $(".tooltip").metadata().filter;

// Writing:
$(".tooltip").metadata().filter = "whatever";