How to use jquery to add text between existing <a href=''>Add text here</a>

Question

I have a lightbox gallery with the following HTML code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <title>GTO Gallery</title>
    </head>
    <body>
        <div class="container-fluid">       
            <h1>GTO Gallery</h1>
            <ul id="imageGallery">
                <li><a href="img/1964_GTO.jpg"><img src="img/1964_GTO.jpg" width="100" alt="1964 Pontiac GTO" class="image"></a></li>
                <li><a href="img/1965_GTO.jpg"><img src="img/1965_GTO.jpg" width="100" alt="1965 Pontiac GTO"></a></li>
                <li><a href="img/1966_GTO.jpg"><img src="img/1966_GTO.jpg" width="100" alt="1966 Pontiac GTO"></a></li>
                <li><a href="img/1967_GTO.jpg"><img src="img/1967_GTO.jpg" width="100" alt="1967 Pontiac GTO"></a></li>
                <li><a href="img/1968_GTO.jpg"><img src="img/1968_GTO.jpg" width="100" alt="1968 Pontiac GTO"></a></li>
                <li><a href="img/1969_GTO.jpg"><img src="img/1969_GTO.jpg" width="100" alt="1969 Pontiac GTO"></a></li>
                <li><a href="img/1970_GTO.jpg"><img src="img/1970_GTO.jpg" width="100" alt="1970 Pontiac GTO"></a></li>
                <li><a href="img/1971_GTO.jpg"><img src="img/1971_GTO.jpg" width="100" alt="1971 Pontiac GTO"></a></li>
                <li><a href="img/1972_GTO.jpg"><img src="img/1972_GTO.jpg" width="100" alt="1972 Pontiac GTO"></a></li>
                <li><a href="img/1973_GTO.jpg"><img src="img/1973_GTO.jpg" width="100" alt="1973 Pontiac GTO"></a></li>
                <li><a href="img/1974_GTO.jpg"><img src="img/1974_GTO.jpg" width="100" alt="1974 Pontiac GTO"></a></li>
            </ul>       
        </div>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/app.js" type="text/javascript" charset="utf-8"></script>    
    </body>

. Between 320px and 462px I want to remove the picture and only have the links showing. I want the text for the links to come from the alt attribute. I know I can get the this text like this:

var $altText = $('img').attr('alt');

and I think I can use

$("img").removeClass("image");

to remove the images

What I cannot figure out is how to put the text between the and the so that it's

<li><a href="img/1964_GTO.jpg">1964 Pontiac GTO</a></li>

I also cannot figure out how to only have it apply in that particular media query.

You want to remove every picture or the mentioned 1964 only? — Muhammad Ashikuzzaman
– Muhammad Ashikuzzaman, Commented Oct 10, 2015 at 2:24

davcs86 · Accepted Answer · 2015-10-10 02:41:32Z

3

Use

$("a").each(function(i){
    var img = $(this).find("img");
    $(this).text(img.attr("alt"));
});

JSFiddle demo

edited Oct 10, 2015 at 2:41

answered Oct 10, 2015 at 2:26

davcs86

3,9462 gold badges20 silver badges30 bronze badges

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

1 Comment

davcs86 Over a year ago

@Ashik I think so, too

guradio · Accepted Answer · 2015-10-10 02:21:04Z

2

$('a').html('TEXT HERE')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href=''></a>

Just add html to the anchor

answered Oct 10, 2015 at 2:21

guradio

15.6k4 gold badges39 silver badges65 bronze badges

2 Comments

comfortablyNumb Over a year ago

Dang I was making it much more complicated than it was. Thank you

guradio Over a year ago

@comfortablyNumb happy coding

Collectives™ on Stack Overflow

How to use jquery to add text between existing <a href=''>Add text here</a>

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related