I have an array classNameList My 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>

initially i am hiding all the tables and when someone clicks on above anchor link i have to show the table that has that same class name

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

How can I get value/s of an array that starts with "ServiceModelListId". I tried using this:

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

Is there any other process with out .each or for ?

I have an array classNameList My 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>

initially i am hiding all the tables and when someone clicks on above anchor link i have to show the table that has that same class name

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

How can I get value/s of an array that starts with "ServiceModelListId". I tried using this:

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

Is there any other process with out .each or for ?

• javascript
• jquery
• arrays

Share Improve this question Follow edited Mar 19, 2015 at 10:29 Gadde asked Mar 19, 2015 at 10:12 GaddeGadde 1,4811616 silver badges3737 bronze badges 1

• 3 If you want to check that it starts with the value, change > -1 to == 0 – Rory McCrossan Commented Mar 19, 2015 at 10:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

Try this : Create an array with name classsName and use .push() to add value to it. You need to pare indexOf value with 0 for checking start with value as Service

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

JSFiddle Demo

NOTE - start with selection is case sensitive

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./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>

I used $.each functionality

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


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