Tengo un montón de bloques (divs) con divs secundarios que tienen enlaces (sp-pcp-readmore) Quiero cambiar el valor href de cada enlace (sp-pcp-readmore) con jQuery. El HTML para un div (bloque) es el siguiente:
<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>El javascript con el que tengo problemas es este y no está cambiando el href en absoluto
$(".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; } });Esto se puede simplificar enormemente
$(".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>Alternativa
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>Esto se cambia de acuerdo con su código HTML de muestra, el enlace de destino no es un elemento secundario de .sp-pcp-title sino el siguiente hermano dentro .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>