Editing objects in jQuery

Question

$(function(){
    var z = document.body.children[0];
    var x=$("li", z);
    x.name="Johnny";
    alert(x.prop(name));
});

1. x should be an object containing all the elements within the first ul in the body. Regardless of what the object contains, I would like to add a property with a value, and then use the prop() method to show it - but that doesn't seem to work. Why is that?

2. I saw a script containing the following: var $x = $("div"); - Do I have to add $ to the variable name if it's a jQuery object?

Answer 1

If you want all li elements in the first ul element, then this should do the trick:

var elements = $("ul:eq(0) li");

Here is a very simple example of this in action.

---

In regards to setting a property, you can do element.name = "test" and it will work ok. But what you need to understand is that this is setting a name property on the jquery collection object and NOT on any of the actual elements.

What you can do however, is set the property like so:

elements.prop("name", "test");

and the access it like so:

var name = elements.prop("name");//name will be "test"

Here is a working example

---

As I mentioned in my comment, you don't need to prefix the variable with $. But this can be helpful to easily see which variables are JQuery objects.

Answer 2

To select the first ul element inside a page you can do:

$("ul:first li")

This way you are going to select all lines inside the first list in the page.

To store arbitrary data in an element you can use the method data, like this:

$("element").data('key', 'value');

and to retrieve the data:

$("element").data('key');

More info, for the data method.

If you really want to add an attribute you can use the attr method, it works the same way as the data method, but it would reflect in the DOM.

Answer 3

Number 1. x is a jQuery object, you added to that instance a name property, then you're using name though it wasn't defined.

If you want to change a property of the element you got with jQuery the ways are:

$('selector').prop('property', 'value');
$('selector').attr('attribute', 'value');
$('selector').get(index).property = "value";

Number 2. no you don't have to, $ prefix is simply a convention to make the code more readable.
Is there any specific reason behind using $ with variable in jQuery

Answer 4

Using the selector from @musefan answer, you can take the collection returned, and use the attr() method to add an attribute and value to each item selected. However, I've modified his selector slightly to actually grab "all" elements in there, (just in case future visitors wonder)

var elements = $("ul:eq(0)").children();
elements.attr("attrName", value);

So if you wanted to set the title:

var elements = $("ul:eq(0)").children();
elements.attr("title", "Johnny");

You probably don't want to alert these values, browsers may ask you to stop allowing alerts on the page... but if you really did, then you could throw in an .each() after that.

var elements = $("ul:eq(0)").children();
elements.attr("title", "Johnny").each(function(){
     alert($(this).attr("title");
});