jquery - 无法在标签标记中循环 div 并获取其第一个子级的文本内容

Question

我想做的事:

每个标签都有 div (.credit-card-last4)，其中包含卡号。我想将一个类 (.uzcard) 添加到 LABEL，其中卡号前 4 位数字以 1200 开头。并将一个类 (.humo) 添加到 LABEL，其中卡号前 4 位数字以 1000 开头。

为了更好地理解，请尝试将这些类之一 () 添加到不同的标签并运行代码

这是我的脚本、CSS 和 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] 将元素从 jQuery 对象中分离出来。所以 jQuery 方法在其上不可用。要解决此问题，您需要切换到使用 cardnumberdiv.eq(i) 来获取元素，但将其保留在 jQuery 对象中，以便所有 jQuery 方法都可用。

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')
  }
}

另一种方法是使用 each()，并完全删除索引。

$(".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')
  }
});