Change href destination of child

November 10, 2021

I have a bunch of blocks (divs) with child divs that have links (sp-pcp-readmore) I want to change the href value of every link (sp-pcp-readmore) with jQuery. The HTML for one div (block) is as follows:

<div class="sp-pcp-post pcp-item-4978" data-id="4978">
    <div class="pcp-post-thumb-wrapper">
        <div class="sp-pcp-post-thumb-area">
            <a
                class="sp-pcp-thumb"
                aria-label="feature_image"
                href="/machines/"
                target="_blank"
            >
                <img
                    src="machine-300x300.jpg"
                    data-src="machine-300x300.jpg"
                    class="pcp-lazyload lazy-loaded"
                    alt=""
                    width="300"
                    height="300"
                />
            </a>
        </div>
    </div>

    <h2 class="sp-pcp-title">
        <a href="/machines/" target="_blank"
            >Machines</a
        >
    </h2>

    <div class="sp-pcp-post-content">
        <div class="sp-pcp-readmore">
            <a
                class="pcp-readmore-link"
                target="_blank"
                href="/machines/"
            >
                Explore Now
            </a>
        </div>
    </div>
</div>

The javascript I am having trouble with is this and it is not changing the href at all

        $(".sp-pcp-title").each(function() {
            switch($(this).text()) {
                case "Machines":
                        $(this).find(".pcp-readmore-link").attr('href', '/product-category/machines/');
                    break;
                case "Weights":
                        $(this).find(".pcp-readmore-link").attr('href', '/product-category/weights/')
                    break;
                case "Dumbells":
                        $(this).find(".pcp-readmore-link").attr('href', '/product-category/dumbells/')
                    break;
                case "Barbels":
                        $(this).find(".pcp-readmore-link").attr('href', '/product-category/barbels/')
                    break;
            }
        });

>Solution :

This is changed according to your sample HTML code, the target link is not a child of .sp-pcp-title but next sibling inside .sp-pcp-post-content

   $(".sp-pcp-title").each(function() {
            switch($(this).children('a').text()) {
                case "Machines":
                        $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/machines/');
                    break;
                case "Weights":
                        $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/weights/')
                    break;
                case "Dumbells":
                        $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/dumbells/')
                    break;
                case "Barbels":
                        $(this).next('.sp-pcp-post-content').find(".pcp-readmore-link").attr('href', '/product-category/barbels/')
                    break;
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sp-pcp-post pcp-item-4978" data-id="4978">
    <div class="pcp-post-thumb-wrapper">
        <div class="sp-pcp-post-thumb-area">
            <a
                class="sp-pcp-thumb"
                aria-label="feature_image"
                href="/machines/"
                target="_blank"
            >
                <img
                    src="machine-300x300.jpg"
                    data-src="machine-300x300.jpg"
                    class="pcp-lazyload lazy-loaded"
                    alt=""
                    width="300"
                    height="300"
                />
            </a>
        </div>
    </div>

    <h2 class="sp-pcp-title">
        <a href="/machines/" target="_blank"
            >Machines</a
        >
    </h2>

    <div class="sp-pcp-post-content">
        <div class="sp-pcp-readmore">
            <a
                class="pcp-readmore-link"
                target="_blank"
                href="/machines/"
            >
                Explore Now
            </a>
        </div>
    </div>
</div>