Question

想象一下：

页面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");
}

对于返回值，而不是＆＃34;它起作用＆＃34;，如何让它拉入类名的其余部分，例如＆＃34;叠加结果＆＃34;或者如果需要整个div内容，例如＆＃34; <div class="overlay-results"><span></span></div>＆＃34;

还有很多其他类似的页面，其中包含不同的＆＃39;叠加 - ＆＃39;因为我不想对每个人进行一次搜索，所以这个“一个尺码适合所有人”。方法

Answer 1

您可以使用this jQuery选择器，例如

这将为您提供在其班级名称的某处overlay的元素。

$('div[class*=overlay]')

这将为您提供哪个类名以overlay开头的元素。

$('td[class^=overlay]')

这将为您提供哪个类名以overlay结尾的元素。

$('td[class$=overlay]')

编辑：

要在代码中使用此功能，您可以执行以下操作：

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

这个功能fi 并且在类名中带有overlay的元素返回完整的类名。

Answer 2

要选择开始的元素，请使用^之类的[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];
}

Answer 3

你可以使用正则表达式并像这样重写：

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

Answer 4

如果我理解正确，您需要与叠加层匹配的完整类，而不是元素属性类的值。通过使用选择器进行部分属性搜索，我们可以获得与该搜索匹配的所有元素，然后遍历它们，从类中提取与给定部分类匹配的元素。

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]

Answer 5

在jquery中简单使用.find()。

获取当前匹配组中每个元素的后代元素，由选择器，jQuery对象或元素过滤。

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

Answer 6

使用SMACSS Methodology（https://smacss.com/book/），您可以根据布局和结构模块化您网站的不同区域。页面布局获得顶级类，它们应用基本和通用样式，任何页面特定样式都通过名称间隔类应用。例如，所有叠加层都有.ovr类，表示它是叠加层，.ovr-homepage，.ovr-results类将适用，并且具有独特的样式。

您可以使用$('body .ovr');或$('body .ovr-homepage');或$('body .ovr.ovr-homepage');的特定叠加层获取所有叠加层模块。

不是用JS过度复杂，而是可以用CSS结构和组织来解决。

搜索部分类名，返回完整的类名

6 个答案: