时间戳

首页 > 解决方案 > jQuery each() not working correctly with wrapAll() and wrap()

javascript - jQuery each() not working correctly with wrapAll() and wrap()

问题描述

I've created a simple triptych. The content is entered on a CMS so I have have to wrap the divs with JS. The issue is that when I wrap the contents of 2 triptychs everything is wrapped into one triptych. Am i using jQuery's each() function correctly? Or what am I doing wrong? Thanks!

$(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>

标签： javascriptjqueryloops

解决方案

You have to use this to find the specific element inside of the class:

$(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>

推荐阅读