想象一下:
页面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>
“?
有许多其他类似的网页,不同的'覆盖-'类名称,所以我不想做一个搜索,因此每个'一刀切'的做法。
7条答案
按热度按时间yeotifhr1#
例如,您可以使用this jQuery选择器
这会给予你一个类名上有
overlay
的元素。$('div[class*=overlay]')
这将为您提供类名以
overlay
开头的元素。$('td[class^=overlay]')
这将为您提供类名以
overlay
结尾的元素。$('td[class$=overlay]')
编辑:
要在您的代码中使用它,您可以执行以下操作:
此函数用于查找类名中有覆盖的元素,并返回完整的类名。
wnavrhmk2#
您可以使用正则表达式并将其重写为:
ct3nt3jp3#
要选择**以其开头的元素,请使用类似于
[class^="overlay-"]
的^
。要返回以
class
开头的所有元素,可以:-或者在只有一个类时返回该类,可以用途:-
或当有多个类时,用途:-
9wbgstp74#
如果我没理解错的话,你想要的是与覆盖匹配的完整类,而不是元素的属性类的值,通过选择器进行部分属性搜索,我们可以得到所有与搜索匹配的元素,然后迭代它们,从它们的类中提取与给予部分类匹配的元素。
将输出:
[overlay-homepage,overlay-results]
或页面上的任何内容,如果您只需要一个结果,则可以简单地执行getFullClass("overlay-")[0]
7rfyedvj5#
在jquery中简单使用
.find()
。获取当前匹配元素集中每个元素的后代,并通过选择器、jQuery对象或元素进行过滤。
mutmk8jj6#
使用SMACSS方法(https://smacss.com/book/)您可以根据布局和结构模块化站点的不同区域。页面布局获得应用基本样式和通用样式的顶级类,任何页面特定样式都通过名称空间类应用。例如,所有覆盖都具有
.ovr
类,表明它是一个覆盖,而.ovr-homepage
,.ovr-results
类将应用唯一样式。然后,您可以使用
$('body .ovr');
获得所有覆盖模块,或使用$('body .ovr-homepage');
或$('body .ovr.ovr-homepage');
获得特定覆盖。与其用JS使它过于复杂,不如用CSS结构和组织来解决它。
du7egjpx7#
下面是一个普通的JS解决方案。
返回包含子字符串
overlay
的所有类名:还有两个:
返回所有以开头的类名的子字符串
overlay
:返回所有以结尾的类名子字符串
overlay
:说明:
*=
^=
和$=
为CSS attribute selectors:*=
在任意位置搜索子字符串^=
在开始处搜索子字符串$=
搜索末尾的子字符串^
和$
属性选择符的含义与它们在正则表达式中的含义一致。