[SOLVED] How to find div with class from current page?

Questions
1

Im trying to find a div with class “.gallery-top” from the current page and if I use

page.$el.find(".gallery-top") then it finds it, but this isn´t getting the current page, if I have navigate to the same page for example, then I have 2 pages with a div with class “.gallery-top”.

So I tested $$('.page-current').find(".gallery-top"); but that is not working, so how do I find a class on the current page?

Thanks.

2

app.views.current.currentPageEl

3 
page.$el.find(".gallery-top")

will look for this div in the page where you call it. I guess in some page callback, then it looks in that specific page.

If you need to find it everywhere then just $$(".gallery-top")

4

Hi Vladimir and thanks. But since Im using stacked pages, then I can have multiple pages that has the same data-name and therefor I would like to get the one on the page-current.
Im using a single view called mainView.

As fore shastox answer, how do I use app.views.current.currentPageEl in my case?
Is app.views.current('gallery-top') get me the one in page-current or?

5

then it is just $$('.gallery-top') to get this element on all pages. If still doesn’t work then its better to see live example or JSFiddle

6

Hi
The problem I have is that I can´t get the active Index for a swiper when I load the same page with the same swiper.
It is not getting the index for the right swiper if I don´t get the .gallery-top class from the current page.

This is what I have.

setTimeout(function() {
	test=page.$el.find(".gallery-top")
var swiper = new Swiper(test, {
              spaceBetween: 0,
              slidesPerView: 1,
              slideToClickedSlide: true,
              loop: false,
              pagination: {
				el: '.swiper-pagination',
				type: 'bullets',
			  },
			  navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			  },
			  effect: 'fade',
});

swiper.on('slideChange', function () {
  
  var theslide=swiper.activeIndex //this is working the first time I load the page, but not if I load the same page again, using stacked pages.

 $$('.tumbsimage').css('opacity','1');
  $$('.smallimage'+theslide+'.tumbsimage').css('opacity','.5');
	
});

You can see it here https://www.manmade.se/dumpen/ and if you click on the image on the start page with the headline “Multi bilder” it loads the “shop2” page, then you can click on the thumbnails underneath the swiper and it changes the swiper images as it should.

But if you the scroll down to the 3 images below and click on the “Artikelnamn” then it loads that in the same page “shop2” and then the thumbnails done´t work, since it is not finding the right swiper index.
It is loading the 3 bottom images randomly, so you might have to test it a couple of times for “Artikelnamn” to show up.

Thanks Vladimir

7

And where do you call this code?

8

I call it inside

$$(document).on('page:init', '.page[data-name="shop2"]', function (e) {
var page = e.detail;
9

It does work correct for me

10

Thanks Vladimir. I got it working in the end :slight_smile: