Блог

Главная - Вопросы по программированию - Запуск функции jQuery в отдельных классах

Запуск функции jQuery в отдельных классах

#html #jquery

#HTML #jquery

Вопрос:

У меня есть несколько элементов HTML, которые имеют одинаковую разметку. У каждого div есть уникальный родительский класс.

Поэтому, когда я пытаюсь написать некоторый jQuery для таргетинга на каждый элемент по отдельности, он срабатывает во всех экземплярах независимо от того, указываю ли я, на какой класс ориентироваться. Я думал, что при использовании (this) он будет нацелен только на содержимое внутри div ‘box__wrapper—before’.

Кто-нибудь знает, где я ошибаюсь?

 $('.box__wrapper--before').each(function() {
  $(this).find('.box__random').insertBefore('.box__item:nth-child(3');
}); 
 html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #282828;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

h1 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 0;
}

.box__wrapper {
  color: #111;
  padding-bottom: 20px;
  padding-top: 20px;
}

.box__wrapper:nth-child(odd) {
  background: green;
}

.box__wrapper:nth-child(even) {
  background: blue;
}

.box__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.box__flex__wrapper {
  display: flex;
  justify-content: center;
  margin-left: -60px;
}

.box__item {
  padding-left: 60px;
  flex-basis: 20%;
  max-width: 20%;
}

.box__item span {
  align-items: center;
  border: 4px solid white;
  border-radius: 100px;
  display: flex;
  height: 60px;
  justify-content: center;
}

.box__one span,
.box__three span {
  background: #58b2eb;
}

.box__two span,
.box__four span {
  background: #ffa770;
}

.box__random span {
  background: #7fd28c;
}

.prod__cta__msg {
  background: red;
  bottom: 0;
  position: absolute;
  width: 100%;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box__wrapper box__wrapper--before">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 1</span>
      </div>
    </div>
  </div>
</section>

<section class="box__wrapper box__wrapper--after">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 2</span>
      </div>
    </div>
  </div>
</section>

Пример Codepen: https://codepen.io/nickelse/pen/MWbdvPw

Комментарии:

1. Не совсем понятно, какая цель более высокого уровня здесь

2. Ну, я только хочу, чтобы jQuery запускался на любом div с классом ‘box__wrapper—before’, но он нацелен на все divs, поскольку разметка одинакова внутри обоих divs. Таким образом, он находит каждый экземпляр ‘box__random’, а не только те, что находятся внутри ‘box__wrapper—before’.

3. Я вижу только один раздел с этим классом. Все еще не ясно. Пожалуйста, предоставьте правильное объяснение полного ожидаемого поведения и того, как показанный код отличается от него

4. Есть два divs с точно такой же разметкой. У одного есть родительский класс ‘box__wrapper—before’, а у другого есть ‘box__wrapper—after’, поэтому я хочу настроить таргетинг только на разметку внутри ‘box__wrapper—before’, но jQuery, как он есть, нацелен на все, поэтому нет никакой специфики.

5. OK Может использовать $(this).find... то же самое, что и способ, которым вы находите случайный класс

Ответ №1:

Проблема заключается в:

 .insertBefore('.box__item:nth-child(3)')

который добавляет box_random во все разделы.

.insertBefore Может принимать объект jquery (а не просто селектор строк), который указывает точку вставки, поэтому вы можете использовать this для поиска только соответствующего n-го дочернего элемента:

 $('.box__wrapper--before').each(function() {
  var third = $('.box__item:nth-child(3)', this);
  $(this).find('.box__random').insertBefore(third);
});

(переменная не требуется, показана для наглядности)

Оригинал мог быть написан как:

 $('.box__wrapper--before').each(function() {

  var third = $('.box__item:nth-child(3)');

  $(this).find('.box__random').insertBefore(third);
});

где вы можете видеть, что

   var third = $('.box__item:nth-child(3)');

выбирает все элементы для всех родителей — поэтому необходимо добавить эту специфику.

Ниже приведен обновленный фрагмент. Здесь поле__random во 2-м div не перемещается, потому что его нет в .box__wrapper—before .

 $('.box__wrapper--before').each(function() {
  $(this).find('.box__random').insertBefore($('.box__item:nth-child(3)', this));
}); 
 html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #282828;
  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  margin: 0;
}

h1 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 0;
}

.box__wrapper {
  color: #111;
  padding-bottom: 20px;
  padding-top: 20px;
}

.box__wrapper:nth-child(odd) {
  background: green;
}

.box__wrapper:nth-child(even) {
  background: blue;
}

.box__container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}

.box__flex__wrapper {
  display: flex;
  justify-content: center;
  margin-left: -60px;
}

.box__item {
  padding-left: 60px;
  flex-basis: 20%;
  max-width: 20%;
}

.box__item span {
  align-items: center;
  border: 4px solid white;
  border-radius: 100px;
  display: flex;
  height: 60px;
  justify-content: center;
}

.box__one span,
.box__three span {
  background: #58b2eb;
}

.box__two span,
.box__four span {
  background: #ffa770;
}

.box__random span {
  background: #7fd28c;
}

.prod__cta__msg {
  background: red;
  bottom: 0;
  position: absolute;
  width: 100%;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box__wrapper box__wrapper--before">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 1</span>
      </div>
    </div>
  </div>
</section>

<section class="box__wrapper box__wrapper--after">
  <div class="box__container">
    <div class="box__flex__wrapper">
      <div class="box__item box__one">
        <span>Div One</span>
      </div>

      <div class="box__item box__two">
        <span>Div Two</span>
      </div>

      <div class="box__item box__three">
        <span>Div Three</span>
      </div>

      <div class="box__item box__four">
        <span>Div Four</span>
      </div>

      <div class="box__item box__random">
        <span>Dynamic Div 2</span>
      </div>
    </div>
  </div>
</section>