Develop Reference

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");
});
});

Change href of a link jquery

currently I have a textbox in which someone can type in a link, and then a link on the page next to the textbox should change it's href attribute to the text the user just typed in.
My javascript:
var LinkText = $("[id$=TextBox]").val();
$("[id$=DocumentLink]").href = LinkText;
My HTML:
<a id ="DocumentLink" target = "_blank" href="http://www.currentlink.com/">Link to Document</a>
<input id="TextBox" type="text" /> `
Although LinkText is picked up as the string typed in the textbox, the second line of my javascript is not working as I want. The link stays as the currentlink.
I have jQuery 1.4.2 if that helps, I could be doing something that doesn't work with that maybe.

Since you have a jQuery object you have to set the attr
$("[id$=DocumentLink]").attr("href", LinkText);
Or you can get the actual HTMLElement at the 0 index and call .href that way:
$("[id$=DocumentLink]")[0].href = LinkText;
And since your matching an exact ID, just use $("#DocumentLink")

Try it:
$("#DocumentLink").attr('href', LinkText);
Regards.

jQuery object doesn't have href property. You are defining a property for the jQuery object which doesn't affect the href property of the HTMLElement object in the jQuery collection. You could use the attr or the prop method instead.

set the attr of the link.
$("[id$=DocumentLink]").attr("href", LinkText);
i think it would be much easier to use JS and innerHTML.

How can I tell jquery to html( ) an element to its original value, before it was dynamically changed?

I have a div, and I used html() to change its content. I am doing a "cancel" button, and I would like to html() back to the original value.
Is there an efficient way to do this? I'm trying to avoid to html() the whole code again, as it doesn't look very good and is probably not the best practice.
Thanks a lot in advance. Regards

// store the old content
var myOldContent = $("#cancelbutton").html();
// change content
$("#cancelbutton").html(someNewContent);
// and change it back
$("#cancelbutton").html(myOldContent);

If at all possible, don't use .html to toggle content this way -- use two adjacent, nearly-identical elements, one with the old HTML and one with the new, and create a hidden CSS class with display: none and assign it to the second element. Then toggle this hidden class on both elements at the same time.
HTML:
<button class="cancel" id="cancel-original">Cancel</button>
<button class="cancel hidden" id="cancel-second">Cancelling...</button>
CSS:
.hidden {
display: none;
}
JQuery:
$('button.cancel').click(function() {
$('button.cancel').toggleClass('hidden'); // toggles both at once
});
http://jsfiddle.net/e9eLP/

You can clone it when it's made, using jQuery, and when you cancel, delete that and clone the old version back in.

The browser does not track the original value.
However, you can store the original HTML yourself into a variable when the page loads.

You can save the previous HTML content into a variable and then restore from that variable on cancel.
var previousHtml = $('#someElement').html();
Then
$('#someElement').html(previousHtml);

You would need to save it in a variable before changing it:
<script>
var origHTML = $("#divid").html();
function ResetDiv(){
$("#divid").html(origHTML);
}
</script>

By using jQuery's data() function you can easily hold the original value internally, and then restore it with something like this:
$('#a').click(function(){
$('div').data('store',$('div').html()).html('foo');
});​​
$('#b').click(function(){
$('div').html($('div').data('store'));
});
​
jsFiddle example.
(Note that this example is just to illustrate how to store a value using data() and not meant for production code.)

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.

How to make div clickable?

I want to make this div click-able and want to use same href of inside <a> and want to keep link in inside <a> also (so if JS is disabled then link will be accessible).
<div id="example">
<p> some text </p>
<img src="example.jpg />
<a href="http://stackoverflow.com"> link </link>
</div>
I mean i need like this.
<div id="example" href="http://stackoverflow.com">
<p> some text </p>
<img src="example.jpg />
<a href="http://stackoverflow.com"> link </link>
</div>

Something like this should do
$('#example').click(function() {
window.location.href = $('a', this).attr('href');
});

I cannot reply to the above conversation yet because I am new here, but I just wanted to say that you do not need to return false from this function. What that does is prevent the default behavior of the event from happening (which, in the case of clicking a div is nothing) and prevent the event from propagating up to the next element in the DOM hierarchy.
It is unlikely that either of these are necessary for this case. Additionally, if you do need these behaviors, you can get them separately and more clearly like so:
// note that the function will be passed an event object as
// its first argument.
$('#example').click(function(event) {
event.preventDefault(); // the first effect
event.stopPropagation(); // the second
window.location.href = $('a', this).attr('href');
});
Again, I don't think either approach is necessary in this case, but it is important to understand how they work, because you will need one or both of them frequently.

<html>
<body>
<div onclick="window.location.href = this.getElementsByTagName('a')[0].href;">
<p>some text</p>
link
</div>
</body>
</html>

The above answers are all accepted by me. And generally u can make the same or even more great
effect to "div" than "a" by css. And you can add js function to show the css changes when a event happened like Click. Maybe like this: DIV.onclick = function(){ change the target dom object css here }。 then when the event occurs, you will see the effect. and if you want to change href to another one. write js like location.href="http://www.target.com"; it will work for you.