Добавить класс к ребенку, если он имеет тот же номер c, что и родительский класс

Question

Мне нужно добавить класс к потомку, если у него тот же класс нумерации c, что и у родителя, или мне нужно удалить потомков родителя, если у него нет того же класса нумерации c. Так что в моем примере, если child имеет класс post-55, а parent имеет тот же класс, я добавлю класс, видимый для child. Я получаю эту ошибку: Невозможно прочитать свойство '1' с нулевым значением.

jQuery( 'article' ).each( function() {
 var parent_id = jQuery(this).attr('class').match(/post-(\d+)/)[1];
  var child_id = jQuery(this).children('div').attr('class').match(/post-(\d+)/)[1];
  
  if ( child_id == parent_id ) {
  jQuery(this).children('div').addClass('visible');
}
              });

article {
 width:200px;
 height:200px;
 background: red;
 margin:20px;
}
.inner {
 width:100px;
 height:100px;
 margin:20px;
 background: black;
}

<article class="post-45">
  <div class="post-55 inner"></div>
  <div class="post-44 inner"></div>
  <div class="post-45 inner"></div>
</article>
<article class="post-55">
  <div class="post-34 inner"></div>
  <div class="post-55 inner"></div>
  <div class="post-45 inner"></div>
</article>
<article class="post-34">
  <div class="post-34 inner"></div>
  <div class="post-45 inner"></div>
  <div class="post-55 inner"></div>
</article>

Answer 1

Лучшая реализация будет выглядеть следующим образом: возьмите атрибут class статьи, используя .attr () , затем используйте .find () для элемента, выбранного внутри * Функция 1005 * для выбора подходящего потомка, вот рабочий фрагмент:

$( 'article' ).each(function(i, el){
  let elClass = $(el).attr('class');
  $(el).find(`.${elClass}`).addClass('visibile');
});

article {
 width:200px;
 height:200px;
 background: red;
 margin:20px;
}
.inner {
 width:100px;
 height:100px;
 margin:20px;
 background: black;
 display:none;
}
.visibile {
  display: block;
}

<article class="post-45">
  <div class="post-55 inner"></div>
  <div class="post-44 inner"></div>
  <div class="post-45 inner"></div>
</article>
<article class="post-55">
  <div class="post-34 inner"></div>
  <div class="post-55 inner"></div>
  <div class="post-45 inner"></div>
</article>
<article class="post-34">
  <div class="post-34 inner"></div>
  <div class="post-45 inner"></div>
  <div class="post-55 inner"></div>
</article>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Работает, если вы создаете функцию each() для элементов div внутри каждой статьи:

jQuery('article').each(function() {
  var parent_id = jQuery(this).attr('class').match(/post-(\d+)/)[1];
  jQuery(this).children('div').each(function() {
    var child_id = jQuery(this).attr('class').match(/post-(\d+)/)[1];
    if (child_id == parent_id) {
      jQuery(this).addClass('visible');
    }
  });
});

article {
 width:200px;
 height:200px;
 background: red;
 margin:20px;
}
.inner {
 width:100px;
 height:100px;
 margin:20px;
 background: black;
 display:none;
}
.visible {
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="post-45">
  <div class="post-55 inner"></div>
  <div class="post-44 inner"></div>
  <div class="post-45 inner"></div>
</article>
<article class="post-55">
  <div class="post-34 inner"></div>
  <div class="post-55 inner"></div>
  <div class="post-45 inner"></div>
</article>
<article class="post-34">
  <div class="post-34 inner"></div>
  <div class="post-45 inner"></div>
  <div class="post-55 inner"></div>
</article>