0

I've just started using javascript and am trying to do the following:
My html doc contains divs and span elements like below. I want to create a variable which will store the value of my-new-id for a specific div child element.
The only information I have to go on, is that I always know what the span text will be cause it's based on a username. Therefore, how would I get the value of my-new-id for user1?

I have already figured out how to navigate to the correct div elemenet using the document.getElementById method. I then try to use a jquery selector such as :contains, but get stuck.

Many thanks on advance.

<div id=1>
<span my-new-id=x>user1</span>
<span my-new-id=y>user2</span>
<span my-new-id=z>user3</span>
</div>

<div id=2>
<span my-new-id=x>user10</span>
<span my-new-id=y>user1</span>
<span my-new-id=z>user30</span>
</div>
Improve this question
6
  • Are you using the jQuery library? Else the jquery-selectors tag is inappropriate. You could use querySelectorAll to get the spans directly. Commented Jan 7, 2013 at 14:02
  • @Christoph It would appear so, since he describes using :contains in the question. Commented Jan 7, 2013 at 14:08
  • @Asad well, then there would be no need for a native dom-method, right? Commented Jan 7, 2013 at 14:09
  • @Christoph Right, you'd just use $. You could still use native methods if you felt like it though. Commented Jan 7, 2013 at 14:11
  • @Christoph, yes, we are using the jQuery library. Commented Jan 7, 2013 at 14:12

1 Answer 1

Reset to default
2

Using jQuery:

var val = $('span:contains("user1")').attr('my-new-id');

A couple of additional points:

  • Do not use IDs that begin with a number. This is not allowed in the HTML4 spec, and can cause unexpected behavior in some browsers. Instead, prefix your ID's with an alphabetic string, like this:

    <div id="container1">
    ...
</div>

  • I would recommend that you use data-* attributes instead of making up non existent attributes. You can make data attributes like this:

    <span data-new-id="x">user1</span>

    You can then retrieve this value using:

    $('span:contains("user1")').data('newId');

    Note that the attribute name has been stripped of dashes and camel-cased.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Cool. So this gets me the value of the attribute I am after. I already have a variable like below which stores the correct div, how do I then prefix this variable to your example, so that I can search for the attribute? var myDiv = document.getElementById('DivNumber2'); Thanks for the help.
@Eddie You can include it in the selector expression, as in: $('DivNumber2 span:contains("user1")').attr('my-new-id');
@Eddie as I mentioned in the comment to your question, you cannot use jQuery Methods like Asad does on a plain DOM-Object you get from getElementById. You would need to use something like myDiv.attributes["my-new-id"].
I tried the following but when i debug I get a value of 'undefined' for my new variable $myNewVariable. Taking your advice i'm now trying to do something like this: I have a div called user-name2. A value in a span under that div called david. And an attribute on the span called 'my-user-id'. Maybe my syntax is incorrect? This is my line of javascript. $myNewVariable = $('user-name2 span:contains("david")').attr('my-user-id');
@Eddie Yes, I made a slight mistake. When specifying an ID in a selector, you need to precede it with #. So your statement should be: $myNewVariable = $('#user-name2 span:contains("david")').attr('my-user-id');
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.