css 搜索部分类名,返回完整类名

6yt4nkrj  于 2023-03-20  发布在  其他
关注(0)|答案(7)|浏览(144)

想象一下:
页面A在body中包含以下内容:

<div class="overlay-homepage"><span></span></div>

B页包含:

<div class="overlay-results"><span></span></div>

我可以使用此脚本来确定它们是否包含覆盖类,其内容如下:

function() {
    var htmlString = $('body').html().toString();
    var index = htmlString.indexOf("div class=\"overlay-");
    if (index != -1)
        return("It works");
}

对于返回值,除了“It works”之外,我如何让它拉入类名的其余部分,例如“overlay-results”,或者如果需要,拉入整个div内容,例如“<div class="overlay-results"><span></span></div>“?
有许多其他类似的网页,不同的'覆盖-'类名称,所以我不想做一个搜索,因此每个'一刀切'的做法。

yeotifhr

yeotifhr1#

例如,您可以使用this jQuery选择器
这会给予你一个类名上有overlay的元素。
$('div[class*=overlay]')
这将为您提供类名以overlay开头的元素。
$('td[class^=overlay]')
这将为您提供类名以overlay结尾的元素。
$('td[class$=overlay]')
编辑:
要在您的代码中使用它,您可以执行以下操作:

function() {
  var attr = $('div[class*=overlay]').attr('class');
  return(attr);
});

此函数用于查找类名中有覆盖的元素,并返回完整的类名。

wnavrhmk

wnavrhmk2#

您可以使用正则表达式并将其重写为:

function() {
  var htmlString = $('body').html().toString();
  var matches = htmlString.match(/class="(overlay-[^\s"]*)/);
  if (matches.length)
    return(matches[1]);
}
ct3nt3jp

ct3nt3jp3#

要选择**以其开头的元素,请使用类似于[class^="overlay-"]^
要返回以class开头的所有元素,可以:-

function allOverlays() {
   // all elements
   return $('div[class^="overlay-"]');

   //or for the first element
   return $('div[class^="overlay-"]:eq(0)');
}

或者在只有一个类时返回该类,可以用途:-

function overlayClass() {
   return $('div[class^="overlay-"]:eq(0)').attr('class');
}

或当有多个类时,用途:-

function overlayClass() {
   var classes = $('div[class^="overlay-"]:eq(0)').attr('class');
   return /overlay-\w+/.exec(classes)[0];
}
9wbgstp7

9wbgstp74#

如果我没理解错的话,你想要的是与覆盖匹配的完整类,而不是元素的属性类的值,通过选择器进行部分属性搜索,我们可以得到所有与搜索匹配的元素,然后迭代它们,从它们的类中提取与给予部分类匹配的元素。

function getFullClass(partialClass) {
    foundClasses = [];
    $("[class*='" + partialClass + "']").each(function (i, e) {
        foundClasses.push($(e).attr("class").split(" ").filter(function (d) {
            return d.indexOf(partialClass) >= 0
        }));
    });
    return foundClasses;
}

//Callable like:
getFullClass("overlay-");

将输出:[overlay-homepage,overlay-results]或页面上的任何内容,如果您只需要一个结果,则可以简单地执行getFullClass("overlay-")[0]

7rfyedvj

7rfyedvj5#

在jquery中简单使用.find()
获取当前匹配元素集中每个元素的后代,并通过选择器、jQuery对象或元素进行过滤。

$(function() {
  if($('body').find("[class^='overlay-']").length) {
    alert('it works');
  }
});
mutmk8jj

mutmk8jj6#

使用SMACSS方法(https://smacss.com/book/)您可以根据布局和结构模块化站点的不同区域。页面布局获得应用基本样式和通用样式的顶级类,任何页面特定样式都通过名称空间类应用。例如,所有覆盖都具有.ovr类,表明它是一个覆盖,而.ovr-homepage.ovr-results类将应用唯一样式。
然后,您可以使用$('body .ovr');获得所有覆盖模块,或使用$('body .ovr-homepage');$('body .ovr.ovr-homepage');获得特定覆盖。
与其用JS使它过于复杂,不如用CSS结构和组织来解决它。

du7egjpx

du7egjpx7#

下面是一个普通的JS解决方案。
返回包含子字符串overlay的所有类名:

document.querySelectorAll( '[ class*="overlay" ]' )

还有两个:
返回所有开头的类名的子字符串overlay

document.querySelectorAll( '[ class^="overlay" ]' )

返回所有以结尾的类名子字符串overlay

document.querySelectorAll( '[ class$="overlay" ]' )

说明:*=^=$=CSS attribute selectors

  • *=在任意位置搜索子字符串
  • ^=在开始处搜索子字符串
  • $=搜索末尾的子字符串

^$属性选择符的含义与它们在正则表达式中的含义一致。

相关问题