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;
}
});
This can be vastly simplified
$(".sp-pcp-title").each(function() {
let text = $("a",this).text().trim();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${text.toLowerCase()}`);
});
$(".sp-pcp-title").each(function() {
let text = $("a",this).text();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${text.toLowerCase()}`);
});<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="">Explore Now</a>
</div>
</div>
</div>Alternative
const hrefs = { "Machine":"machine", "Bar- and dumbells":"weights" }
$(".sp-pcp-title").each(function() {
let text = $("a",this).text().trim();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${hrefs[text]}`);
});
const hrefs = { "Machines":"machines", "Bar- and dumbells":"weights" }
$(".sp-pcp-title").each(function() {
let text = $("a",this).text().trim();
$(this).next().find(".pcp-readmore-link").attr('href', `/product-category/${hrefs[text]}`);
});<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="/weights/" target="_blank">Bar- and dumbells</a>
</h2>
<div class="sp-pcp-post-content">
<div class="sp-pcp-readmore">
<a class="pcp-readmore-link" target="_blank" href="">Explore Now</a>
</div>
</div>
</div>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>