Develop Reference

Get a Tag Attribute Value when Tab is active

I am trying to retrieve the value inside a Tag if the Tab is active.
The Tag goes like this :
<li class="top-tab" role="tab" tabindex="0" aria-selected="true" aria-expanded="true"> TITLE OF SECTION </li>
I want to retrieve the Value "true" of the attribute "aria-selected".
My final goal is to fire a tag (GTM) to get the Title of section when Tab is active (hence attribute is true).
I tried this :
document.getElementsByClassName("top-tab")[0].Attr("aria-selected").value("true").textContent
Note : I cannot access the html source to modify elements.

The below will get the inner text of the first element with class ".top-tab" and aria-selected attribute "true"
var elementInnerText = document.querySelector(".top-tab, [aria-selected=true]").innerText;

What you want to do is use
document.getElementsByClassName("aria-selected")[0].getAttribute("aria-selected")
This will return the value of that attribute inside the top-tab tag.
You can use this value to then evaluate if you want to get the inner test of the <li> with the following.
document.getElementsByClassName("top-tab")[0].innerText

To get all tags that have area-selected="true"
var selected = document.querySelectorAll('[aria-selected="true"]');
Then get the inner html of the element
selected[0].innerHTML;
I am not sure why you need to get them by class. Do you have the "area-selected" attribute on other elements? If not, then the code above should work just fine for you,

Accessing properties of a tag within a tag

I have an a tag as follows:
<a href="data1.html" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-folder-close"></i>Root Folder
</a>
I have a function that gets called when you click on a tag. It is as follows -
$(document).ready(function() {
$("a").hover(function(event) {
console.log(event.target.href);
});
});
I can access the properties of a tag. Example: If i want to access the href of the a onclick, I can get it by event.target.href.
I want to access the properties of the i tag that is inside the a tag (for instance, class of i tag is "glyphicon glyphicon-folder-close").
How do I achieve that?
Also, what changes do I have to make to the function, such that it is called only if a tags of class = "list-group-item" are clicked?
Thanks in advance.

I want to access the properties of the i tag that is inside the a tag
Inside any jQuery event handler, this refers to the element on which the event was triggered: therefore you can use any selector relative to that element. $(this).children('i') for example will find the contained i given your HTML; if the element might be nested more deeply you'd want .find() instead of .children().
what changes do I have to make to the function, such that it is called only if a tags of class = "list-group-item"
Change the selector you're using to attach the handler - $("a.list-group-item") instead of $("a") to limit it to items having that class.
Note also that if you want this to work on click as you describe, rather than on hover as in your sample code, you'll need to return false from the event handler (so that the regular link navigation doesn't occur).
$(document).ready(function(e) {
$("a.list-group-item").click(function() {
var myChild = $(this).children('i')
console.log(myChild.attr("class")); // for example
return false; // prevent regular navigation from occurring on click
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" class="list-group-item">
<i class="glyphicon glyphicon-folder-close"></i> Will fire handler on click
</a>
<br>
<a href="https://example.com">
<i class="glyphicon glyphicon-folder-close"></i> Will navigate normally
</a>

Since you are using jQuery, this will be very easy!
$(document).ready(function() {
$("a.list-group-item").click(function(event) {
$(this).find('i').attr('class');
});
});
To get only certain anchor tags you can use a selector, read more about them here. Then you can use the this object to find children. Use the find method in jQuery. Finally use the attr to retrieve the class.

You can rewrite your function like this:
$(document).ready(function() {
//Only use list-group-item
$("a.list-group-item").hover(function(event) {
var $attrNode = $(this).find("i");
//Now that you have the list group item it is easy to get the attribute
var attributeValue = $attrNode.attr("your-attribute");
//You can also set the attribute
$attrNode.attr("your-attribute", "attribute value");
});
});

Select the value/text of an <a> element with jquery

I got these 3 links
<a id="ajaxed" href="#" value="213">WTF</a>
<a id="ajaxed" href="#" value="213">DUDE</a>
<a id="ajaxed" href="#" value="213">SRSLY</a>
And I want to parse the value attribute. I'm using this script but it always return null.
jQuery.noConflict();
jQuery(document).ready(function ($) {
$('#ajaxed').on('click',function() {
var value = $(this).val();
alert(value);
});
});
Also I tried parse the text and it only works for the first one <a>.
The fiddle of that one:
http://jsfiddle.net/dzasusxp/18/
What am I doing wrong? It seems kinda ok for me...

IDs are has to be unique per element in a page and also .val() should only be applied on form elements. To get the value you should consider the .attr() method.
To get this working you should change your id attribute to class.
$('.ajaxed').click(function(){
var val = $(this).attr('value');
alert(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="ajaxed" href="#" value="213">WTF</a>
<a class="ajaxed" href="#" value="213">DUDE</a>
<a class="ajaxed" href="#" value="213">SRSLY</a>

The problem is, id attribute should be always uniqe in HTML.
See here.
Use a class instead the id.
See the FIDDLE
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

Id must be unique.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

Change your ajaxed id to class and following code work fine.
jQuery(document).ready(function ($) {
$('.ajaxed').on('click',function() {
var value = $(this).text();
alert(value);
});
});
http://jsfiddle.net/dzasusxp/20/

$('#ajaxed') will not be returning array of 'a' tag elements. It returns the first matched element. Try to give different ID's or same class name, as below
jQuery.noConflict();
jQuery(document).ready(function ($) {
$('.ajaxed').on('click',function() {
var value = $(this).text();
alert(value);
});
});
<a class="ajaxed" href="#" value="213">WTF</a>
<a class="ajaxed" href="#" value="213">DUDE</a>
<a class="ajaxed" href="#" value="213">SRSLY</a>
See difference between id and class ID/CSS

The attribute value in an a tag is an invalid attribute. The method .value() takes focus for form fields. If you really want to use this attribute in an a tag, use the method .attr("value") instead of .value().

try $el.txt() to get el.innerText

passing a javascript variable as id inside a jquery function

<li id="sub:777" class="jstree-leaf">
<ins class="jstree-icon2"> </ins>
<a class=""><ins class="jstree-icon2"> </ins>Story B</a>
</li>
I need to change the class of the <ins> tags for a specific <li>:
var original_sub_id = $j(element).attr('id'); e.g sub:777
var new_sub_id = original_sub_id.split(":");
new_sub_id = new_sub_id.join("\\\\:"); e.g sub\\:777
I need to pass the new_sub_id variable in the code below, but it does not seem to work:
$j("#"+new_sub_id + "ins:eq(1)").attr("class","jstree-icon2"); // set class to display new icon
Any suggestion are most welcome.

i have a feeling it's because of the : in your ID.
: in jquery selectors tends to preceed a pseudo selector like :checked, :selected, :focus

$j("#"+new_sub_id + " ins:eq(1)").attr("class","jstree-icon2"); // set class to display new icon
Don't forget the space before ins:eq(1)
Also be sure this element exists : $j("#"+new_sub_id + " ins:eq(1)")

Since you already have a reference to the li, you can just pass that as the context for your selector.
$j("ins:eq(1)", element).attr("class","jstree-icon2")

Problem returning a value from clicked link

I have a set links on a page like this
<a href='' class='contact' data-index='1'>One</a>
<a href='' class='contact' data-index='2'>One</a>
<a href='' class='contact' data-index='3'>One</a>
I am trying to return the value of the data-index of each link when it is clicked but Whenever I click on each link, the data-index of the first link is always returned because jQuery will select all the links with class = 'contact' on the page.
I am trying to figure out how to select the data-index of the clicked link.
I use something like this :
var m_data = $("a#contact").attr("data-index");
I've also tried something like this :
$("a#contact").click(function() {
var data = $(this).data('index');
});
but data was undefined.
Please how do I do this? Thanks.

# is an id selector. Which should be unique. When using id-selector in jQuery, it will always return the first element, since it isn't expecting to find any more items.
Change your code
<a data-index="1" class="contact">Whatever</a>
$("a.contact").click(function() {
var data = $(this).data("index");
});
And as Eskat0n mentions, since jQuery 1.6, jQuery automatically gets data- attributes via the data() method

Since jQuery 1.6.x values of data attributes populates into data associated with element by jQuery, so if your html look like <a class="contact" data-index="5"></a> your code should work:
$("a.contact").click(function() {
var data = $(this).data('index');
// data is "5"
});
As you can see there is correction: # used to get element by id which needed to be unique. Use class intead of id for multiply link elements.

$("a.contact").each(function()
{
$(this).click(function()
{
var data = $(this).attr('data-index');
});
});

You want .index(). This fiddle indicates how it can be used if the list of links is the only list on the page and also if there are other DOM elements mixed in with the links.