How to add Image to parent element using jquery

Question

1.00/5 (1 vote)

See more:

Hii ,

JavaScript

<th class="reportgridheader">
<a >Category </a>
</th>

I am having this structure , so when i call Category tag , i want to add an image to his parent element .. which is th element ..

Please suggest me on this ..

I am having many structure like this .. so when child tag will be called his parent gets an image

Posted 29-Sep-14 20:24pm

Torakami

Add a Solution

Comments

Sergey Alexandrovich Kryukov 30-Sep-14 3:16am

What image? It could be a background image, or a part of inner HTML of th.

What is "category tag"?
1) there is no such tag, 2) you did not show any tag with such names.
In all cases, I see no problem.

Don't mist up HTML notions 1) tag, 2) element, 3) attribute 4) attribute value, 5) text node.

—SA

Torakami 30-Sep-14 4:52am

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shemeemsha (ഷെമീംഷ) · Answer 1 · 2014-09-29T21:26:00

Solution 2

Add a class to 'a' tag

<table><thead><th class="reportgridheader">
<a href="#" class="category">Category</a>
</th></thead></table>

Add JQuery code

$(document).ready(function () {
    $('.category').click(function() {
        $(this).parent().append( "<img src='' />" );
    });
});

If you are looking for background image of parent element, use this code

$(document).ready(function () {
    $('.category').click(function() {
         $(this).parent().css("background-image", "pathOfTheImage");
    });
});

Posted 29-Sep-14 21:26pm

Shemeemsha (ഷെമീംഷ)

Updated 29-Sep-14 21:32pm

v2

Comments

Torakami 30-Sep-14 3:48am

Shemeemsha (ഷെമീംഷ) 30-Sep-14 6:25am

Put # as href value...Like
--------------------
a href='#'
-------------------

If you forgot to add the #, the page will refresh...

Torakami 30-Sep-14 6:31am

I alrready have #

Shemeemsha (ഷെമീംഷ) 30-Sep-14 6:43am

oh...Then try using
a href="javascript:void(0);"

Torakami 30-Sep-14 6:46am

let me check ..

Torakami 30-Sep-14 6:52am

no still it doesnt working .. it seemz to me that when i am appending the element there its calling document .ready () again , because i hardcoded add the image element and within the same function i am setting visisble true false property of the elements and its working fine ... appending the element troubling me ..

Shemeemsha (ഷെമീംഷ) 30-Sep-14 7:09am

Actually i am not getting your JS code..
you have defined a function..On click you are calling that function..
Put an alert inside the function and check the function is calling or not..
I hope your code is like this..
'a href='#' onClick="StatusSorting(this);"

Sergey Alexandrovich Kryukov · Answer 2 · 2014-09-29T21:20:00

Please see my comment to the question. In all cases, all you need is this:
http://api.jquery.com/attr[^] (to modify attribute value, like in <image src="..."/>),
http://api.jquery.com/category/manipulation[^] (for DOM insertion of any inner HTML you may need),
http://api.jquery.com/category/css[^] (to change the element's class using properties like background-image).

You choose what you need to use.

—SA