Can't loop div in label tag and get its first child's text content

Question

What I'm trying to do:

Each label has div (.credit-card-last4) which contains card number. I want to add a class (.uzcard) to the LABEL which card number's first 4 digits starts with 1200. And add a class (.humo) to the LABEL which card number's first 4 digits starts with 1000.

To better understand try to add one of these classes () to the different labels and run code

HERE IS MY SCRIPT, CSS, AND HTML

cardnumberdiv = $(".credit-card-last4")
for (let i = 0; i = cardnumberdiv.length; i++) {
  if (cardnumberdiv[i].innerText.substring(0, 4) == '1200') {
    cardnumberdiv[i].parent().addClass('uzcard')
  } else if (cardnumberdiv[i].innerText.substring(0, 4) == '1000') {
    cardnumberdiv[i].parent().addClass('humo')
  }
}

::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-trac {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  background-color: #a1a1a187;
  outline: 1px solid slategrey;
}

#cardchecklistbody::-webkit-scrollbar {
  width: 0.5em;
}

#cardchecklistbody::-webkit-scrollbar-trac {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#cardchecklistbody::-webkit-scrollbar-thumb {
  background-color: #a1a1a187;
  outline: 1px solid slategrey;
}

body.modal-open {
  padding: 0 !important;
  overflow-y: scroll;
}

select option {
  border: none!;
}

.form-control:focus {
  color: #495057 !important;
  background-color: #ffffffb8 !important;
  border: 1px solid #6c757d !important;
  outline: none !important;
  box-shadow: none !important;
}

table.dataTable {
  border-collapse: collapse !important;
}

.table td,
.table th {
  vertical-align: middle;
}

#infotable_wrapper {
  padding: 0 !important;
}

#infotable {
  margin: 0 !important;
}

#scheduletable tbody tr button {
  border: none;
  background: none;
  border-radius: 50px;
  float: right;
  padding: 0;
  width: 1.5em;
  transition: all .3s ease-in-out;
}

#scheduletable tbody tr button:focus {
  outline: none;
}


/* #scheduletable tbody tr button i {
    color: #6c757d;
} */

#maincardrow {
  border-radius: 10px;
  overflow: hidden;
}

#cardrow {
  -webkit-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.75);
  padding: 20px;
  border-radius: 10px;
  overflow: hidden;
}


/* #cardrow:before {
    content: "";
    height: 15.25em;
    left: 3.95em;
    top: 21em;
    bottom: 0;
    right: 0;
    width: .8em;
    display: inherit;
    position: absolute;
    border-radius: 15px;
    z-index: 10;
    box-shadow: inset 7px 0px 5px -6px rgba(0, 0, 0, 0.75);
} */


/* 
#cardrow:after {
    content: "";
    height: 15.25em;
    top: 21em;
    bottom: 0;
    right: 3.95em;
    width: .8em;
    display: inherit;
    position: absolute;
    border-radius: 15px;
    z-index: 10;
    box-shadow: inset -7px 0px 5px -6px rgba(0, 0, 0, 0.75);
} */

.fade {
  opacity: 0;
  transition: opacity .5s ease-in-out !important;
}

.modal-dialog {
  backdrop-filter: blur(10px);
  border-radius: 15px !important;
}

.btn-cg {
  background-color: transparent;
  border: 1px solid #6c757d;
  color: #222;
  transition: all .3s ease-in-out;
}

.btn-cg:focus {
  background-color: #8bbe83e0 !important;
  box-shadow: none !important;
}

.btn-cg:hover {
  color: white;
  background-color: #8bbe83 !important;
  box-shadow: none !important;
}

.btn-secondary {
  color: #222;
  background-color: transparent;
  border: 1px solid #6c757d;
  transition: all .3s ease-in-out;
  box-shadow: none !important;
}

.left-shadow {
  box-shadow: -8px 0px 20px -18px #00000096;
}

.z-1 {
  z-index: 2;
}

.z-2 {
  z-index: 3;
}

.z-3 {
  z-index: 4;
}

.z-4 {
  z-index: 5;
}

.z-5 {
  z-index: 6;
}

.gradient-0 {
  background-image: radial-gradient( circle 621px at 25.3% 13.8%, rgba(255, 255, 255, 1) 0%, rgba(234, 236, 255, 1) 90%);
}

.gradient-1 {
  background-image: radial-gradient( circle 561px at 81.4% 88.4%, rgba(236, 111, 102, 1) 0%, rgba(243, 161, 131, 1) 90%);
}

.gradient-2 {
  background-image: linear-gradient( 109.7deg, rgba(101, 204, 184, 1) 12.9%, rgba(109, 236, 185, 1) 101.5%);
}

.gradient-3 {
  background-image: radial-gradient( circle 848px at 10% 20%, rgba(174, 231, 165, 0.90) 0%, rgba(181, 205, 154, 1) 90%);
}

.gradient-4 {
  background-image: radial-gradient( circle 907px at 3.4% 19.8%, rgba(255, 243, 122, 1) 0%, rgba(255, 102, 145, 1) 97.4%);
}

.gradient-5 {
  background-image: linear-gradient( 111.4deg, rgba(122, 192, 233, 1) 18.8%, rgba(4, 161, 255, 1) 100.2%);
}

i.material-icons {
  display: inline-flex;
  vertical-align: middle;
  border-radius: 50%;
}

.close:focus {
  outline: none !important;
}

.form-control:focus {
  box-shadow: none!important;
}


/* 
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #23272b;
    border: none !important;
    height: 100%;
} */

.page-link:focus {
  box-shadow: none !important;
  border: 1px solid #222 !important;
}

.shadow-none {
  box-shadow: none!important;
}

.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075)!important;
}

.shadow {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175)!important;
}

.tab-pane {
  border: 1px solid #dee2e6;
  border-top: none !important;
}

#news {
  background: url('https://wallpaperaccess.com/full/656668.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.75);
}


/* #news h1 {
    
    background-color: #4a4a4a;
    font-size: 125px;
    color: transparent;
    text-shadow: 2px 2px 3px #e8e8e8;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    font-weight: 700;
} */

.tile {
  width: 100%;
  margin: auto;
  box-shadow: 0 0 1rem -6px #00000040;
  border-radius: 15px;
  overflow: hidden;
}

#tile-1 .tab-pane {
  padding: 15px;
}

#tile-1 .nav-tabs {
  position: relative;
  border: none!important;
  background-color: #fff;
  /*   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); */
  border-radius: 6px;
}

#tile-1 .nav-tabs li {
  margin: 0px!important;
}

#tile-1 .nav-tabs li a {
  position: relative;
  margin-right: 0px!important;
  padding: 20px 40px!important;
  font-size: 16px;
  border: none!important;
  color: #333;
}

#tile-1 .nav-tabs a:hover {
  background-color: #fff!important;
  border: none;
}

#tile-1 .slider {
  display: inline-block;
  width: 30px;
  height: 2px;
  border-radius: 3px;
  background-color: #22222238;
  position: absolute;
  z-index: 1;
  bottom: 0;
  transition: all .4s cubic-bezier(0.72, -0.39, 1, 1);
}

#tile-1 .nav-tabs .active {
  background-color: transparent!important;
  border: none!important;
  color: #222222!important;
}

.cardcont {
  /* left: calc(50% - 300px); */
  display: flex;
}

.ccard {
  /* z-index: 2; */
  display: flex;
  width: 85.60mm;
  height: 53.98mm;
  background-color: #17141d;
  border-radius: 10px;
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
}


/* .ccard:not(:first-child) {
    margin-left: -225px;
} */

.ccard:hover {
  box-shadow: -1rem 0 3rem #00000040;
  z-index: 9 !important;
  /* transform: translateY(-20px); */
  transition: 0.4s ease-in-out;
}

.ccard:hover~.ccard {
  position: relative;
  left: 150px;
  transition: 0.4s ease-out;
}

.addcard:not(:first-child) {
  margin-left: -200px;
}

.addcard {
  z-index: 1;
  display: flex;
  width: 85.60mm;
  height: 53.98mm;
  background-color: #17141d;
  border-radius: 10px;
  transition: 0.4s ease-out;
  position: absolute;
  right: 0px;
}

.addcard .add {
  width: 2em;
  height: 2em;
  border-radius: 50px;
  cursor: pointer;
  font-size: 40px;
  position: absolute;
  right: 0;
  top: .3em;
  transition: 0.4s ease-out;
}

.addcard .add:hover {
  background-color: #f9f9f9;
  ;
}

.addcard .list:hover {
  background-color: #f9f9f9;
  ;
}

.addcard .add i {
  font-size: 40px;
}

.addcard .list i {
  font-size: 40px;
}

.addcard .add:active:not {
  background-color: red;
}

.addcard .list {
  width: 2em;
  height: 2em;
  border-radius: 50px;
  cursor: pointer;
  font-size: 40px;
  position: absolute;
  right: 0;
  bottom: .3em;
  transition: 0.4s ease-out;
}

.title {
  color: white;
  font-weight: 300;
  position: absolute;
  left: 20px;
  top: 15px;
}

.exp {
  color: white;
  font-weight: 300;
  position: absolute;
  right: 20px;
  top: 15px;
}

.balance {
  color: white;
  font-weight: 300;
  position: absolute;
  left: 20px;
  bottom: 15px;
}

.balancenum {
  color: white;
  font-weight: 300;
  position: absolute;
  right: 20px;
  bottom: 15px;
}

.cardnum {
  word-spacing: 16px;
  letter-spacing: 2px;
  color: white;
  font-size: 24px;
  font-weight: 300;
  position: absolute;
  right: 20px;
  bottom: 75px;
}

#modallist {
  border: none !important;
  margin: auto;
  width: 100%;
  max-width: 95vw;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  box-shadow: -1rem 0 3rem #00000029;
  padding: 10px;
  /* margin-top: 50px;
    margin-bottom: 50px; */
  border-radius: 15px;
  background: #f8f9fa85;
}


/* MAIN CREDIT CARD CONTAINER */

.credit-card {
  display: block !important;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 7px;
  width: 25em;
  position: relative;
  transition: all 0.4s ease;
  box-shadow: 0 2px 4px 0 #cfd7df;
  min-height: 50px;
  padding: 13px;
  color: #efefef;
  font-weight: 300;
}

.credit-card.selectable:hover {
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.16);
}


/*  NUMBER FORMATTING */

.credit-card-last4 {
  font-size: 24px;
  margin-bottom: 16px;
}


/* .credit-card-last4:before {
    content: "**** **** **** ";
    color: #4f4d4d;
    font-size: 20px;
} */

.credit-card.american-express .credit-card-last4:before,
.credit-card.amex .credit-card-last4:before {
  content: "**** ****** *";
  margin-right: -10px;
}

.credit-card.diners-club .credit-card-last4:before,
.credit-card.diners .credit-card-last4:before {
  content: "**** ****** ";
}

.credit-card-expiry {
  font-size: 14px;
  position: absolute;
  bottom: 8px;
  left: 15px;
}


/* BRAND CUSTOMIZATION */

input[type="radio"]:checked+label.credit-card.chck:before {
  content: '✓';
  text-align: center;
  position: absolute;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  z-index: 15;
  right: .5em;
  top: .5em;
}

.credit-card.visa {
  background: #4862e2;
  color: #eaeef2;
}

.credit-card.visa .credit-card-last4:before {
  color: #8999e5;
}

.credit-card.mastercard {
  background: #4f0cd6;
  color: #e3e8ef;
}

.credit-card.mastercard .credit-card-last4:before {
  color: #8a82dd;
}

.credit-card.american-express,
.credit-card.amex {
  background: #1cd8b3;
  color: #f2fcfa;
}

.credit-card.american-express .credit-card-last4:before,
.credit-card.amex .credit-card-last4:before {
  color: #99efe0;
}

.credit-card.diners,
.credit-card.diners-club {
  background: #8a38ff;
  color: #f5efff;
}

.credit-card.diners .credit-card-last4:before,
.credit-card.diners-club .credit-card-last4:before {
  color: #b284f4;
}

.credit-card.discover {
  background: #f16821;
  color: #fff4ef;
}

.credit-card.discover .credit-card-last4:before {
  color: #ffae84;
}

.credit-card.jcb {
  background: #cc3737;
  color: #f7e8e8;
}

.credit-card.jcb .credit-card-last4:before {
  color: #f28a8a;
}


/*   LOGOS  */

.credit-card:after {
  content: '';
  width: 2em;
  position: absolute;
  bottom: 1em;
  right: 3em !important;
}

.credit-card.uzcard:after {
  /* content: url("/templates/card/images/uzcard.svg"); */
  content: 'TYPE_A';
}

.credit-card.humo:after {
  content: 'TYPE_B';
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="cardsdc" class="credit-card chck selectable animated fadeInUp gradient-1">
    <div class="credit-card-last4">
        1200 **** **** 0000
    </div>
</label>

<label for="cardsdc" class="credit-card chck  selectable  animated fadeInUp gradient-2">
    <div class="credit-card-last4">
        1000 **** **** 0000
    </div>
</label>
<label for="cardsdc" class="credit-card chck selectable  animated fadeInUp gradient-3">
  <div class="credit-card-last4">
    1200 **** **** 0000
  </div>
</label>
<label for="cardsdc" class="credit-card chck selectable  animated fadeInUp gradient-4">
    <div class="credit-card-last4">
        1000 **** **** 0000
    </div>
</label>
<label for="cardsdc" class="credit-card chck  selectable  animated fadeInUp gradient-5">
  <div class="credit-card-last4">
      1200 **** **** 0000
  </div>
</label>

Answer 1

cardnumberdiv[i] breaks the Element out of the jQuery object. So jQuery methods are not available on it. To fix this, you need to switch to using cardnumberdiv.eq(i) which will get the element, but leave it in a jQuery object, so all the jQuery methods will be available.

cardnumberdiv = $(".credit-card-last4")
for (let i = 0; i = cardnumberdiv.length; i++) {


  if (cardnumberdiv[i].innerText.substring(0, 4) == '1200') {
    cardnumberdiv.eq(i).parent().addClass('uzcard')
  } else if (cardnumberdiv[i].innerText.substring(0, 4) == '1000') {
    cardnumberdiv.eq(i).parent().addClass('humo')
  }
}

Another approach would be to use each(), and remove the index entirely.

$(".credit-card-last4").forEach(function(){
  let $this = $(this);

  if ($this.text().substring(0, 4) == '1200') {
    $this.parent().addClass('uzcard')
  } else if ($this.text().substring(0, 4) == '1000') {
    $this.parent().addClass('humo')
  }
});