获取以特定字符串开头的数组的值

Question

我有一个数组classNameList 我的HTML：

<ul id="servicepricing">
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId27071" class="ServiceModelListId27071 servicepricingicon">FR-S Automatic</a>
        <span style="display: none;">Scion FR-S Automatic Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId27072" class="ServiceModelListId27072 servicepricingicon">FR-S Manual</a>
        <span style="display: none;">Scion FR-S Manual Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId27061" class="ServiceModelListId27061 servicepricingicon">iQ Automatic</a>
        <span style="display: none;">Scion iQ Automatic Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId124" class="ServiceModelListId124 servicepricingicon">tC Automatic</a>
        <span style="display: none;">Scion tC Automatic Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId125" class="ServiceModelListId125 servicepricingicon">tC Manual</a>
        <span style="display: none;">Scion tC Manual Service Pricing</span>
    </li>
</ul>

起初我将所有表格隐藏起来，当有人点击上面的锚点链接时，我需要显示具有相同类名的表格。

<table id="FR-SManual" class="content sortable pureprice-data servicepricing-view ServiceModelListId27071" style="display: none;">
</table>
<table id="FR-SManual" class="content sortable pureprice-data servicepricing-view ServiceModelListId27072" style="display: none;">
</table>
<table id="FR-SManual" class="content sortable pureprice-data servicepricing-view ServiceModelListId27061" style="display: none;">
</table>
<table id="FR-SManual" class="content sortable pureprice-data servicepricing-view ServiceModelListId2124" style="display: none;">
</table>
<table id="FR-SManual" class="content sortable pureprice-data servicepricing-view ServiceModelListId125" style="display: none;">
</table>


var className,
classNameList = ["servicepricingicon", "main","ServiceModelListId27071"];

如何获取以“ServiceModelListId”开头的数组值。我尝试使用以下方法：

function fxnShowHide() {
var aElem = this,
    classNameList = $(aElem).attr("class").split(' '),
    tblwdhClassName;

if ($(aElem).hasClass('main')) {
    $("#hero").show();
    $("table.servicepricing-view").hide();
}

$.each(classNameList, function (key, value) {
    if (value.indexOf("ServiceModelListId") === 0) {
        tblwdhClassName = "table.servicepricing-view." + value;
    }
});

$(tblwdhClassName).show();

}
$(".servicepricingicon").click(fxnShowHide);

有没有其他不需要使用`.each`或`for`的过程？

- Gadde

---

如果你想检查它是否以这个值开始，将> -1改为== 0。 - Rory McCrossan

Answer 1

if (value.substring(0, 7) == "Service") {
    // ...
}

- bln

Answer 2

尝试这个：创建一个名为classsName的数组，并使用.push()向其中添加值。您需要将indexOf值与0进行比较，以检查以Service作为起始值。

var className = new Array();
$.each(classNameList, function( index, value ) {
  if (value.indexOf("Service") == 0) {
        className.push(value);
   }
});

JSFiddle演示

注意 - 从选择开始是区分大小写的。

- Bhushan Kawadkar

Answer 3

var className,
classNameList = ["servicepricingicon", "main","ServiceModelListId27071"];

$.each( classNameList , function( key, value ) {
  var anchor = $("." + classNameList[key]),
      anchorText  = anchor.text(),
      anchorClass = anchor.attr("class");
  
  if (anchorClass.indexOf("Service") > -1) {
        className = anchorText;
        alert(className)
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="servicepricing">
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId27071" class="ServiceModelListId27071 servicepricingicon">FR-S Automatic</a>
        <span style="display: none;">Scion FR-S Automatic Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId27072" class="ServiceModelListId27072 servicepricingicon">FR-S Manual</a>
        <span style="display: none;">Scion FR-S Manual Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId27061" class="ServiceModelListId27061 servicepricingicon">iQ Automatic</a>
        <span style="display: none;">Scion iQ Automatic Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId124" class="ServiceModelListId124 servicepricingicon">tC Automatic</a>
        <span style="display: none;">Scion tC Automatic Service Pricing</span>
    </li>
    <li>
        <a href="/service/page/servicepricing?dpt=4&amp;ServiceModelListId125" class="ServiceModelListId125 servicepricingicon">tC Manual</a>
        <span style="display: none;">Scion tC Manual Service Pricing</span>
    </li>
</ul>

- Gildas.Tambo

---

这个选择器对于类不可靠。如果类的值是 foo bar ServiceFooBar，那么它将无法工作。 - Rory McCrossan

@RoryMcCrossan，现在已经更新了，它可以正常工作了。 - Gildas.Tambo

Answer 4

我使用了 $.each 功能。

var classNameList = $(aElem).attr("class").split(' '),
    elemClassName 


    $.each(classNameList, function (key, value) {
        if (value.indexOf("ServiceModelListId") === 0) {
            elemClassName = "." + value;
        }
    });

- Gadde