简体   繁体   中英

Add a class in an anchor tag within a div with jquery

does anyone know how Can I add a class in the A tag:

<a href="/souscription/digital-vie">Subscribe</a>

Here is my html:

<div class="module" id="prod-subscription">
    <div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
        <div class="contextual-links-wrapper contextual-links-processed">
            <a class="contextual-links-trigger" href="#">Configure</a>
            <ul class="contextual-links">
                <li class="bean- first last">
                    <a href="/block/souscription/edit?destination=node/3719"> bloc</a>
                </li>
            </ul>
        </div>    
        <div class="row">
            <div class="col-md-3">
                <h2>simple<span>in 3 </span></h2>
            </div>
            <div class="col-md-6">
                <ol>
                    <li>
                        <span>1</span><p>text</p>
                    </li>
                    <li>
                        <span>2</span><p>texte testx</p>
                    </li>
                    <li>
                        <span>3</span><p>and text</p>
                    </li>
                </ol>
            </div>
            <div class="col-md-3">
                <a href="/souscription/digital-vie">Subscribe</a>
            </div>
        </div>
    </div>
</div>

You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)

 $('a').filter(function() { return $(this).text() === 'Subscribe'; }).addClass('new-class'); 
 .new-class {color:red;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="/souscription/digital-vie">Subscribe</a> 

you can use

$('a[href="/souscription/digital-vie"]').addClass('classHere');

or

$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');

or

$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');

 $('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere'); 
 .classHere{ background : red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="module" id="prod-subscription"> <div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container"> <div class="contextual-links-wrapper contextual-links-processed"> <a class="contextual-links-trigger" href="#">Configure</a> <ul class="contextual-links"> <li class="bean- first last"> <a href="/block/souscription/edit?destination=node/3719"> bloc</a> </li> </ul> </div> <div class="row"> <div class="col-md-3"> <h2>simple<span>in 3 </span></h2> </div> <div class="col-md-6"> <ol> <li> <span>1</span><p>text</p> </li> <li> <span>2</span><p>texte testx</p> </li> <li> <span>3</span><p>and text</p> </li> </ol> </div> <div class="col-md-3"> <a href="/souscription/digital-vie">Subscribe</a> </div> </div> </div> </div> 

Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM