如何为jQuery点击脚本添加判断a标签是否存在的if else逻辑

实现逻辑 #

只需对.click-child元素内的a标签存在性、以及href属性有效性做判断，满足条件再执行跳转即可，以下是两种可直接使用的实现：

完整校验版（推荐） #

同时校验a标签是否存在、以及href属性是否有效，避免异常跳转：

jQuery(document).ready(function() {
  jQuery("body").on("click", ".click-child", function() {
      const $innerLink = jQuery(this).find("a");
      // 同时满足：存在a标签、a标签有非空href属性才执行跳转
      if ($innerLink.length > 0 && $innerLink.attr('href')) {
          window.location.href = $innerLink.attr('href');
      }
  });
});

逻辑说明 #

• $innerLink.length > 0：判断当前点击元素内确实匹配到了a标签
• $innerLink.attr('href')：过滤掉没有href属性、或者href为空的无效a标签
• 不满足判断条件时不会执行任何操作，完全符合需求

精简版 #

如果不需要额外校验href有效性，仅判断是否能取到href值即可，代码更简洁：

jQuery(document).ready(function() {
  jQuery("body").on("click", ".click-child", function() {
      const href = jQuery(this).find("a").attr('href');
      // 不存在a标签时href为undefined，判断条件不生效
      if (href) {
          window.location = href;
      }
  });
});

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