返回

jQuery与原生JS查找首个可见子元素:类名判断

javascript

查找可见子元素:基于类名的 Switch 语句解决方案

问题分析

目标是在父元素中,基于子元素的类名来确定哪个可见的 <p> 元素是第一个。提供代码尝试使用了 switch 语句,但 switch 的用法不符合逻辑。 switch 主要针对一个变量的不同值进行判断,此处逻辑是针对不同元素类名以及是否可见进行处理。给出的代码中,case 中使用 jquery 选择器 $('.available'),而非直接对比目标元素属性的值,这是逻辑错误的根源。这种方式无法直接判断元素的可见性和类名。 需要进行正确的逻辑分析,并采用有效的方法来实现预期目标。

jQuery 解决方案

借助 jQuery 的便利性,可以较为直接地实现目标。首先获取父元素的子元素,然后筛选出可见的 <p> 元素。找到第一个符合条件的元素后,使用 hasClass() 方法检查其类名,最后执行相应的逻辑。

实现步骤:

  1. 选择父元素,并通过 children() 方法获取其直接子元素。
  2. 利用 .filter(':visible') 筛选出可见元素,同时限定标签类型 .filter('p') 为 p 元素。
  3. 使用 first() 方法获取第一个可见的 p 元素。
  4. 使用 hasClass() 检查该元素的类名, 并结合 switch 执行不同的分支逻辑。

代码示例:

var $target = $('.result-content').children('p').filter(':visible').first();

switch (true) { // 使用 true 作为 switch 的条件
    case $target.hasClass('available'):
        console.log('This is available!');
        break;
    case $target.hasClass('not-available'):
        console.log('This is NOT available!');
        break;
    default:
        console.log('Nothing is available!');
}

说明:

  1. $('.result-content').children('p').filter(':visible').first() 这部分 jQuery 代码的功能是从类名为 result-content 的元素开始,选取它直接的 <p> 子元素中所有可见的第一个元素。
  2. switch (true) 的用法, 保证 case 里面的表达式,进行条件判断,而不是比较固定的值。
  3. hasClass('available')hasClass('not-available') 方法用于判断找到的 <p> 元素是否具有指定的类名, 返回 boolean 类型,用于 case 条件的匹配。

JavaScript 解决方案

如果需要使用原生 JavaScript 实现类似功能,代码会稍微繁琐一些。但是使用合适的 JavaScript 方法同样可以有效解决问题。 这里要处理的问题,依然是在 DOM 结构中查找可见元素。使用 JavaScript 方法更加偏底层,可以深入了解 JavaScript 的元素操作,并且更灵活。

实现步骤:

  1. 使用 document.querySelectordocument.getElementsByClassName 选择父元素。
  2. 使用 children 属性获取子元素列表,然后进行迭代处理。
  3. 在迭代中使用 nodeName 属性过滤 p 元素,并通过 window.getComputedStyledisplay 属性判断元素是否可见。
  4. 检查可见的第一个 p 元素是否拥有所需的类名,执行相应的逻辑。

代码示例:

var parentElement = document.querySelector('.result-content');
var targetElement = null;

if (parentElement) {
  var children = parentElement.children;
    for (var i = 0; i < children.length; i++) {
        var child = children[i];
          if (child.nodeName === 'P') {
           var computedStyle = window.getComputedStyle(child);
          if (computedStyle.display !== 'none') {
            targetElement = child;
            break; // 找到第一个可见元素就停止
           }
         }
    }


if (targetElement) {
     switch (true) {
          case targetElement.classList.contains('available'):
              console.log('This is available!');
              break;
          case targetElement.classList.contains('not-available'):
              console.log('This is NOT available!');
              break;
          default:
              console.log('Nothing is available!');
    }
    }
}
else {
   console.log("Parent Element Not found");
}

说明:

  1. document.querySelector('.result-content') 选择第一个类名为 result-content 的元素。
  2. parentElement.children 属性获取元素所有的子元素,并转换为列表进行处理。
  3. 通过 child.nodeName === 'P' 来检查节点类型是否为 P,并用 window.getComputedStyle(child).display !== 'none' 判断该元素是否为可见。
  4. 使用 targetElement.classList.contains 判断元素是否具有特定类名。
  5. 如果父元素不存在的情况,也会打印 "Parent Element Not found" 。
  6. 需要注意的是原生 JavaScript API 和 jQuery 有区别。前者主要使用原生 DOM 操作,而后者进行了封装。

总结

这两种解决方案均能有效地找出父元素下第一个可见的 <p> 元素,并根据其类名执行相应的逻辑。选择哪种方法取决于个人偏好、项目环境和对代码可维护性的要求。如果项目已经引入了 jQuery,则采用 jQuery 的方案更为便捷,代码也更加简洁。如果需要最小化依赖,则可以使用原生 JavaScript 方法。 需要注意的是, 逻辑处理需要正确处理异常,以及在实际应用中的各种情况。