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

时间：2017-07-04 02:23:13

标签： javascript jquery

我想要以徽标开头的课程，只有示例项目是：

＆＃13;
＆＃13; 
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);

  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

它正在寻找ID并匹配，但却无法选择我想要的类。

此外，我想接受该类并设置为初始href的父元素。

3 个答案:

答案 0 :(得分：0)

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

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

在此处找到一个简单的工作示例：https://codepen.io/jpgcode/pen/GEdQRp

答案 1 :(得分：0)

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

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

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

答案 2 :(得分：0)

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

＆＃13;
＆＃13; 
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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

我希望这可以帮助你!!

相关问题
最新问题