Reputation: 8345
In html, is there a tag that I can add an id attribute to, that does not have any effect on the html page, but can still be accessed with a jQuery selector?
Here is an example:
<li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li>
If I have the above code in a list, what tag can I add to this html, so that I can then use jQuery to perform actions on the code items as children?
The above code is just an example, I am wanting to be able to use this technique for any html element.
EDIT
Is the <span>
tag what I am looking for?
EDIT2
I have tried the following with a span tag:
<span id="qwerty123"><li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li></span>
However, the list items are not being displayed correctly. I am using an AdminLTE template and this template uses custom styling for these list items.
How else can I achieve the desired result? Can I add data attributes or some other html coding technique?
EDIT3
The html tag with the id needs to be before any of the other tags, so that all the rest of the tags can be treated as children.
Upvotes: 26
Views: 32094
Reputation: 1681
try to use Unique ID selector like
<li><a href="#"><i class='fa fa-link'></i> <span id="id7843">Another Link</span></a></li>
in this id (id="id7843")
you can use your id according to your need
your can define class or fuction for that id in jquery it does not affect any other html unless if you are having same id.. try to use unique id for every class you defined.
Upvotes: 0
Reputation: 769
The span
tag is indeed what you are looking for: it's the only HTML inline container tag. Unless you apply CSS to it, it's simply an inline tag that doesn't alter the way your document is displayed.
Please also note that you could use a div
tag and apply CSS display:inline;
to achieve the same result.
Hope this helps :)
Upvotes: 13
Reputation: 559
<li><a href="#"><i class='fa fa-link'></i> <span id = "putyouridhere">Another Link</span></a></li>
Upvotes: 0
Reputation: 2127
You could include an element and then make it invisible. For instance: <i></i>
or <em></em>
and then set
i {
visibility: hidden;
}
And then add an ID and select that element. The element won't affect anything on the page, but will still be capable of being selected.
Upvotes: 0
Reputation: 161831
You can try
<li>
<span id="targetSpan" style="display:none;">
<!-- any children -->
</span>
<a href="#">
<i class='fa fa-link'></i>
<span>Another Link</span>
</a>
</li>
In a block context, you can do the same with "div
":
<div id="targetDiv" style="display:none;">
<!-- any children -->
</div>
I don't believe you can use a div
within the li
, however.
Upvotes: 6