如何用jQuery实现仅为无href的父<a>设置图片点击跳转自身

你只需要在遍历图片时，先判断父<a>标签是否存在有效的href属性，仅当该属性不存在或为空时，再将图片的src赋值给它的href。修改后的代码如下：

修改后的script.js #

$(document).ready(function() {
    // 仅针对带clickable类的图片（如果需要所有图片生效，可改为$("img")）
    $("img.clickable").each(function(){
        var $parentAnchor = $(this).parent('a');
        // 检查父<a>是否无href属性，或href为空值
        if (!$parentAnchor.attr('href')) {
            var imgSrc = $(this).attr('src');
            $parentAnchor.attr('href', imgSrc);
        }
    }); 
});

逻辑说明 #

• 先将父<a>元素缓存为变量$parentAnchor，避免重复查询DOM，提升代码性能
• 使用!$parentAnchor.attr('href')做判断：当<a>标签没有href属性，或者href值为空字符串时，条件成立，才执行赋值操作
• 保留了原代码中针对clickable类图片的处理逻辑，确保只作用于需要的图片

你的HTML代码无需修改，保持原样即可：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>

<a><img src="image2.jpg" class="clickable"></a>
<a href="https://stackoverflow.com/"><img src="image1.jpg" class="clickable"></a>

这样处理后，已有href的<a>标签会保留原有跳转链接，只有无href的<a>会被设置为跳转至图片自身。

内容的提问来源于stack exchange，提问作者prb