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

想象一下：

第A页将其包含在

正文中

：

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

对于返回值，而不是“It works”，我如何让它拉入类名的其余部分，例如“overlay results”，或者如果需要整个

div

内容，例如“

”

还有许多其他类似的页面具有不同的“overlay-”类名，因此我不想对每个页面进行一次搜索，因此采用了“一刀切”的方法。

在jquery中使用Simple use

.find（）

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

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

这将为您提供在其类名的某个位置上覆盖有

的元素

$（'div[class*=overlay]'）

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

$（'td[class^=overlay]'）

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

$（'td[class$=overlay]'）

编辑：

要在代码中使用此选项，可以执行以下操作：

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

此函数为fi
nd类名a中带有覆盖的元素返回完整的类名。
要选择以开始的元素，请使用
^
类似
[class^=“overlay-”]

要返回以该类开头的所有元素，可以：-

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];
}

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

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]
使用SMACSS方法（），您可以根据布局和结构对站点的不同区域进行模块化。页面布局获取应用基本样式和通用样式的顶级类，任何页面特定样式都通过名称间隔类应用。例如，所有覆盖都有
.ovr
类，表明它是一个覆盖，
.ovr homepage
，
。ovr results
类将应用，并且具有独特的样式

您可以使用
$（'body.ovr'）获得所有覆盖模块或带有
$（'body.ovr homepage'）的特定覆盖
或
$（'body.ovr.ovr homepage'）

与其用JS将其过度复杂化，还不如用CSS结构和组织来解决它。
您可以使用正则表达式并将其重写如下：

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

您好，我想这个问题和选择的答案可能对您有所帮助：谢谢，但它如何返回完整的类名？@aphextwig我已经编辑了我的答案以添加函数。
function overlayClass() {
   var classes = $('div[class^="overlay-"]:eq(0)').attr('class');
   return /overlay-\w+/.exec(classes)[0];
}

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-");

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