Understanding jQuery selector output

Question

At some point in my javascript, I create a div with the following code:

var myDiv = document.createElement('div');
myDiv.className = 'square';
myDiv.id = originalID;
...
myDiv.myAttribute = myValue;

Later on, I wish to modify it, so I try to select it with this code:

$("div[myAttribute ='"+ myValue +"']")

However, I am unable to modify myDiv with this code!

$("div[myAttribute ='"+ myValue +"']").id = newID;

So I am trying to debug with this alert:

alert(JSON.stringify($("div[myAttribute ='"+ myValue +"']")));

But it shows a mess of stuff:

{

"length":0,
"prevObject":{
    "0":{
        "location":{
            "href":"http://localhost:3000/",
            "origin":"http://localhost:3000",
            "protocol":"http:",
            "host":"localhost:3000",
            "hostname":"localhost",
            "port":"3000",
            "pathname":"/",
            "search":"",
            "hash":""
        }
    },
    "context":{
        "location":{
            "href":"http://localhost:3000/",
            "origin":"http://localhost:3000",
            "protocol":"http:",
            "host":"localhost:3000",
            "hostname":"localhost",
            "port":"3000",
            "pathname":"/",
            "search":"",
            "hash":""
        }
    },
    "length":1
},
"context":{
    "location":{
        "href":"http://localhost:3000/",
        "origin":"http://localhost:3000",
        "protocol":"http:",
        "host":"localhost:3000",
        "hostname":"localhost",
        "port":"3000",
        "pathname":"/",
        "search":"",
        "hash":""
    }
},
"selector":"div[myAttribute='myValue']"

}

How do I form the statement to use the selector to modify that element's ID?

jQuery objects don't have an `.id` property. You can use `querySelector` instead `document.querySelector("div[myAttribute ='"+ myValue +"']").id = newID` This bypasses the need to create a jQuery object for this simple operation. — , Oct 15 '16 at 22:38
`div.myAttribute = 'X'` sets a property of the object, not an attribute of the element. The first piece of information in the 'messy' debug message shows that the jquery result has a length of 0: there is no matching element. — GolezTrol, Oct 15 '16 at 22:43
@GolezTrol I think you are on to something... how do I select by property? — Hubert S. Cumberdale, Oct 15 '16 at 22:44
There are no property selectors, but instead of a selector, you could pass a function to jQuery methods like [`.filter`](http://api.jquery.com/filter/), which allow you to do custom checks.This function could be called a [predicate](http://stackoverflow.com/questions/3230944/what-does-predicate-mean-in-the-context-of-computer-science), although I thinkk jQuery doesn't use that term. Alternatively, you could use `setAttribute()` or jQuery's `.attr()` to set the value as a (DOM) attribute. — GolezTrol, Oct 15 '16 at 22:46

score 1 · Accepted Answer · answered Oct 15 '16 at 22:45

1

First thing, after creating myDiv,did you append it to the dom. Try appending it to the DOM. check the following code snippet

var myDiv = document.createElement('div');
myDiv.className = 'square';
myDiv.id = "originalID";
document.body.appendChild(myDiv)
myDiv.setAttribute('myAttribute',2);
alert(myDiv.getAttribute('myAttribute'))

Hope this helps

answered Oct 15 '16 at 22:45

Geeky

7,420
2
24
50

yes, I did append to DOM. I think my problem is I am confusing attributes with properties. New to javascript. I think your "set Attribute" hint will help me solve this problem! thanks – Hubert S. Cumberdale Oct 15 '16 at 22:47

Understanding jQuery selector output

1 Answers1