CODEWITHSUNDEEP
jquery
comfortablyNumb
comfortablyNumb

Reputation: 195

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

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.

Upvotes: 0

Views: 79

Answers (2)

davcs86
davcs86

Reputation: 3935

Use 

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

JSFiddle demo

Upvotes: 3

guradio
guradio

Reputation: 15555

$('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

Upvotes: 2

Related Questions