文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用通配符从元素中获取某个类

问使用通配符从元素中获取某个类
EN

Stack Overflow用户
提问于 2017-07-04 10:23:13
回答 3查看 571关注 0票数 0

我想得到与徽标开始的类，唯一的例子项目是：

​

代码语言：javascript
复制
jQuery(document).ready(function($) {

  // add classes to tab items
  var listItems = $(".vc_tta-tab a");
  // loop through all tab items
  listItems.each(function(idx, item) {
    var listItem = $(item);
    var tabID = listItem.attr("href");
    console.log(tabID);
    var matchCard = $(tabID).find('[class^="logo-"]');
    var tabClass = $(tabID).attr("class");
    console.log(tabClass);
    console.log(matchCard);

  });
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
  <div class="vc_tta-tabs-container">
    <ul class="vc_tta-tabs-list">
      <li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#ssl-brand-symantec" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></li>
      <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-geotrust" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></li>
      <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-rapidssl" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></li>
      <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-thawte" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></li>
      <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-certum" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></li>
      <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-comodo" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></li>
    </ul>
  </div>
  <div class="vc_tta-panels-container">
    <div class="vc_tta-panels">
      <div class="vc_tta-panel vc_active logo-ssl-symantec" id="ssl-brand-symantec" data-vc-content=".vc_tta-panel-body">
        <div class="vc_tta-panel-heading">
          <h4 class="vc_tta-panel-title"><a href="#ssl-brand-symantec" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></h4>
        </div>
        <div class="vc_tta-panel-body"></div>
      </div>
      <div class="vc_tta-panel logo-ssl-geotrust" id="ssl-brand-geotrust" data-vc-content=".vc_tta-panel-body">
        <div class="vc_tta-panel-heading">
          <h4 class="vc_tta-panel-title"><a href="#ssl-brand-geotrust" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></h4>
        </div>
        <div class="vc_tta-panel-body"></div>
      </div>
      <div class="vc_tta-panel logo-ssl-rapidssl" id="ssl-brand-rapidssl" data-vc-content=".vc_tta-panel-body">
        <div class="vc_tta-panel-heading">
          <h4 class="vc_tta-panel-title"><a href="#ssl-brand-rapidssl" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></h4>
        </div>
        <div class="vc_tta-panel-body"></div>
      </div>
      <div class="vc_tta-panel logo-ssl-thawte" id="ssl-brand-thawte" data-vc-content=".vc_tta-panel-body">
        <div class="vc_tta-panel-heading">
          <h4 class="vc_tta-panel-title"><a href="#ssl-brand-thawte" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></h4>
        </div>
        <div class="vc_tta-panel-body"></div>
      </div>
      <div class="vc_tta-panel logo-ssl-certum" id="ssl-brand-certum" data-vc-content=".vc_tta-panel-body">
        <div class="vc_tta-panel-heading">
          <h4 class="vc_tta-panel-title"><a href="#ssl-brand-certum" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></h4>
        </div>
        <div class="vc_tta-panel-body"></div>
      </div>
      <div class="vc_tta-panel logo-ssl-comodo" id="ssl-brand-comodo" data-vc-content=".vc_tta-panel-body">
        <div class="vc_tta-panel-heading">
          <h4 class="vc_tta-panel-title"><a href="#ssl-brand-comodo" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></h4>
        </div>
        <div class="vc_tta-panel-body"></div>
      </div>
    </div>
  </div>
</div>

​

它是通过查找ID和匹配ID来工作的，但无法让它选择我想要的类。

此外，我还希望获取该类并将其设置为初始href的父元素。

javascript
jquery
EN

回答 3

Stack Overflow用户

发布于 2017-07-04 11:53:55

问题是搜索类在类列表中。一种方法是读取所有类，然后提取所需类型的类。以下是示例工作代码。我没有添加代码来检查类列表搜索结果的唯一性。

​

代码语言：javascript
复制
jQuery(document).ready(function($) {
    var allLogoClasses = [];
    // add classes to tab items
    var listItems = $(".vc_tta-tab a");
    // loop through all tab items
    listItems.each(function(idx, item) {
    var listItem = $(item);
    var tabID = listItem.attr("href");
	var classes = $(tabID).attr('class');
	if(classes) {
		classes = classes.split(" ");
		for(var index = 0; index < classes.length; index++) {
			if(classes[index].startsWith("logo-")) {
				allLogoClasses.push(classes[index]);
			}
		}
	}
	});
	console.log(allLogoClasses);
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
   <div class="vc_tta-tabs-container">
      <ul class="vc_tta-tabs-list">
         <li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#ssl-brand-symantec" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></li>
         <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-geotrust" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></li>
         <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-rapidssl" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></li>
         <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-thawte" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></li>
         <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-certum" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></li>
         <li class="vc_tta-tab" data-vc-tab=""><a href="#ssl-brand-comodo" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></li>
      </ul>
   </div>
   <div class="vc_tta-panels-container">
      <div class="vc_tta-panels">
         <div class="vc_tta-panel vc_active logo-ssl-symantec" id="ssl-brand-symantec" data-vc-content=".vc_tta-panel-body">
            <div class="vc_tta-panel-heading">
               <h4 class="vc_tta-panel-title"><a href="#ssl-brand-symantec" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Symantec SSL/TLS Certificates</span></a></h4>
            </div>
            <div class="vc_tta-panel-body"></div>
         </div>
         <div class="vc_tta-panel logo-ssl-geotrust" id="ssl-brand-geotrust" data-vc-content=".vc_tta-panel-body">
            <div class="vc_tta-panel-heading">
               <h4 class="vc_tta-panel-title"><a href="#ssl-brand-geotrust" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">GeoTrust SSL Certificates</span></a></h4>
            </div>
            <div class="vc_tta-panel-body"></div>
         </div>
         <div class="vc_tta-panel logo-ssl-rapidssl" id="ssl-brand-rapidssl" data-vc-content=".vc_tta-panel-body">
            <div class="vc_tta-panel-heading">
               <h4 class="vc_tta-panel-title"><a href="#ssl-brand-rapidssl" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">RapidSSL Certificates</span></a></h4>
            </div>
            <div class="vc_tta-panel-body"></div>
         </div>
         <div class="vc_tta-panel logo-ssl-thawte" id="ssl-brand-thawte" data-vc-content=".vc_tta-panel-body">
            <div class="vc_tta-panel-heading">
               <h4 class="vc_tta-panel-title"><a href="#ssl-brand-thawte" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Thawte SSL Certificates</span></a></h4>
            </div>
            <div class="vc_tta-panel-body"></div>
         </div>
         <div class="vc_tta-panel logo-ssl-certum" id="ssl-brand-certum" data-vc-content=".vc_tta-panel-body">
            <div class="vc_tta-panel-heading">
               <h4 class="vc_tta-panel-title"><a href="#ssl-brand-certum" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Certum SSL Certificates</span></a></h4>
            </div>
            <div class="vc_tta-panel-body"></div>
         </div>
         <div class="vc_tta-panel logo-ssl-comodo" id="ssl-brand-comodo" data-vc-content=".vc_tta-panel-body">
            <div class="vc_tta-panel-heading">
               <h4 class="vc_tta-panel-title"><a href="#ssl-brand-comodo" data-vc-accordion="" data-vc-container=".vc_tta-container"><span class="vc_tta-title-text">Comodo SSL Certificates</span></a></h4>
            </div>
            <div class="vc_tta-panel-body"></div>
         </div>
      </div>
   </div>
</div>

​

另一种方法是使用正则表达式从类列表字符串中获取所需的类。

我希望这对你有帮助！

票数 1
EN

Stack Overflow用户

发布于 2017-07-04 10:41:28

您可以使用jQuery is方法检查当前项目分类，如下所示：

if($(item).is('[class^="logo-"]'))

在这里可以找到一个简单的工作示例：https://codepen.io/jpgcode/pen/GEdQRp

票数 0
EN

Stack Overflow用户

发布于 2017-07-04 10:43:17

如果您想要我认为您想要的东西(即选择一个以logo-开头的类，那么您可以使用Regular expressions，也称为正则表达式。

我会使用/^logo-[^ ]*/g作为正则表达式。

/和/g表示一个新的正则表达式。^象征着单词的开始。logo-表示单词的开头包含字符串logo-。[^ ]表示后面有一个不是空格的字符，*表示后面有一个或多个不是空格的字符。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44896058

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档