jQuery каждый () не работает правильно с wrapAll () и wrap () - PullRequest
Новая
       1

jQuery каждый () не работает правильно с wrapAll () и wrap ()

1 голос
/ 27 января 2020

Я создал простой триптих. Содержимое вводится в CMS, поэтому мне нужно обернуть элементы с JS. Проблема в том, что когда я обертываю содержимое 2-х триптихов, все оборачивается в один триптих. Правильно ли я использую функцию jQuery each()? Или что я делаю не так? Спасибо! 

$(document).ready(function () {
	$(".triptych").each(function () { 
		$('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('<div class="iconContainer iconContainer1"> </div>');
		$('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('<div class="iconContainer iconContainer2"></div>');
		$('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('<div class="iconContainer iconContainer3"></div>');
	
		$('.iconContainer').wrapAll('<div class="iconsContainer"> </div>');
	
		$('.iconContainer1').wrap('<a role="button" class="topic1-filter tab" data-tabid="topic1"></a>');
		$('.iconContainer2').wrap('<a role="button" class="topic2-filter tab" data-tabid="topic2"></a>');
		$('.iconContainer3').wrap('<a role="button" class="topic3-filter tab" data-tabid="topic3"></a>');
	
		$('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('<div class="tripctychContent-container"></div>');
	});
});
 .field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
     display: none;
 }

 .showTopicContent {
    display: block;
}

.hideMoreText {
    display: none;
}

.iconsContainer {display: flex;justify-content: space-between;}
p{text-align: center;}
.iconsContainer a {flex: 1; margin-right: 5px;}
.triptych img { width: 150px;margin: 0 auto;display: block;height: 150px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="triptych">
        <div class="inner">
            <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-1-title field--type-text-long"><p>Topic 1 title</p></div>
            <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-2-title field--type-text-long"><p>Topic 2 title</p></div>
            <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-3-title field--type-text-long"><p>Topic 3 title</p></div>
            <div class="field--name-field-topic-1-content"><p>Topic 1 content...</p></div>
            <div class="field--name-field-topic-2-content"><p>Topic 2 content...</p></div>
            <div class="field--name-field-topic-3-content"><p>Topic 3 content...</p></div>
        </div>
    </div>

    <div>
        <h1>this is a random div that should be between the 2 tripticks</h1>
    </div>

    <div class="triptych">
        <div class="inner">
            <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-1-title field--type-text-long"><p>Triptych 2 Topic 1 title</p></div>
            <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-2-title field--type-text-long"><p>Triptych 2 Topic 2 title</p></div>
            <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
            <div class="field--name-field-topic-3-title field--type-text-long"><p>Triptych 2 Topic 3 title</p></div>
            <div class="field--name-field-topic-1-content"><p>Triptych 2 Topic 1 content...</p></div>
            <div class="field--name-field-topic-2-content"><p>Triptych 2Topic 2 content...</p></div>
            <div class="field--name-field-topic-3-content"><p>Triptych 2 Topic 3 content...</p></div>
        </div>
    </div>

1 Ответ

1 голос
/ 27 января 2020

Вы должны использовать this, чтобы найти указанный элемент c внутри класса: 

$(document).ready(function () {
  $(".triptych").each(function () { 
    $(this).find('.field--name-field-topic-1-icon, .field--name-field-topic-1-title').wrapAll('<div class="iconContainer iconContainer1"> </div>');
    $(this).find('.field--name-field-topic-2-icon, .field--name-field-topic-2-title').wrapAll('<div class="iconContainer iconContainer2"></div>');
    $(this).find('.field--name-field-topic-3-icon, .field--name-field-topic-3-title').wrapAll('<div class="iconContainer iconContainer3"></div>');

    $(this).find('.iconContainer').wrapAll('<div class="iconsContainer"> </div>');

    $(this).find('.iconContainer1').wrap('<a role="button" class="topic1-filter tab" data-tabid="topic1"></a>');
    $(this).find('.iconContainer2').wrap('<a role="button" class="topic2-filter tab" data-tabid="topic2"></a>');
    $(this).find('.iconContainer3').wrap('<a role="button" class="topic3-filter tab" data-tabid="topic3"></a>');

    $(this).find('.field--name-field-topic-1-content, .field--name-field-topic-2-content, .field--name-field-topic-3-content').wrapAll('<div class="tripctychContent-container"></div>');
  });
});
.field--name-field-topic-2-content,.field--name-field-topic-3-content,.field--name-field-topic-1-content {
  display: none;
}

.showTopicContent {
  display: block;
}

.hideMoreText {
  display: none;
}

.iconsContainer {display: flex;justify-content: space-between;}
p{text-align: center;}
.iconsContainer a {flex: 1; margin-right: 5px;}
.triptych img { width: 150px;margin: 0 auto;display: block;height: 150px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="triptych">
  <div class="inner">
    <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
    <div class="field--name-field-topic-1-title field--type-text-long"><p>Topic 1 title</p></div>
    <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
    <div class="field--name-field-topic-2-title field--type-text-long"><p>Topic 2 title</p></div>
    <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
    <div class="field--name-field-topic-3-title field--type-text-long"><p>Topic 3 title</p></div>
    <div class="field--name-field-topic-1-content"><p>Topic 1 content...</p></div>
    <div class="field--name-field-topic-2-content"><p>Topic 2 content...</p></div>
    <div class="field--name-field-topic-3-content"><p>Topic 3 content...</p></div>
  </div>
</div>

<div>
  <h1>this is a random div that should be between the 2 tripticks</h1>
</div>

<div class="triptych">
  <div class="inner">
    <div class="field--name-field-topic-1-icon"><img src="https://fakeimg.pl/300/" ></div>
    <div class="field--name-field-topic-1-title field--type-text-long"><p>Triptych 2 Topic 1 title</p></div>
    <div class="field--name-field-topic-2-icon"><img src="https://fakeimg.pl/300/" ></div>
    <div class="field--name-field-topic-2-title field--type-text-long"><p>Triptych 2 Topic 2 title</p></div>
    <div class="field--name-field-topic-3-icon"> <img src="https://fakeimg.pl/300/" ></div>
    <div class="field--name-field-topic-3-title field--type-text-long"><p>Triptych 2 Topic 3 title</p></div>
    <div class="field--name-field-topic-1-content"><p>Triptych 2 Topic 1 content...</p></div>
    <div class="field--name-field-topic-2-content"><p>Triptych 2Topic 2 content...</p></div>
    <div class="field--name-field-topic-3-content"><p>Triptych 2 Topic 3 content...</p></div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...