Get next class with specified class name by div ID anywhere on the page using Jquery-CodePudding

I'm tying to get next div element with soecified class name .select_track by Div Id.

The items every where on the page has same class name .select_track Some tracks maybe repeated on other sections and by the reasons I have different DIV IDs for different sections. In the first section items have id track_'.$row->id.' and in the second section items has id geotrack_'.$row->id.'

This is my code to select, get index, play the track:

// This variable keeps the item index
let keepIndex = null;

// .hoveredPlayTriger class is child of .select_track
$(document).on('click', '.hoveredPlayTriger', function(e) {
    // some codes here

    // That way I'm getting the current class index 
    keepIndex = $(this).closest('.select_track').index();

    // And just logging here to see what it returns
    console.log('Current index:' keepIndex);
    
   // some other codes here
});

And the thing is happens here

"#fplayer_next" is player next track button
$(document).on('click', '#fplayer_next', function(e){
    e.preventDefault();
    
    // The following variable has value: div#track_{{ $row->id }} or div#geotrack_{{ $row->id }}
    let preferToCatch = 'div' keepSelector;

    // Here we are incracing the keeped index number   1
    let nextIndex = keepIndex   1;
    
    // That way we shoud get the next element
    let nextId = $('.select_track').eq(nextIndex).attr('id');

    // Here we are checkng what a hell it gonna return
    console.log('next index:' nextIndex '    and ID: ' nextId);
    
    // And that's it. We are clicking to next element to play the next song
    $('#' nextId ' .hoveredPlayTriger').click();
});

My current code works properly for the first sections and it goes properly to next section's first element too.

We can play next song till the second element of the second section. We can move to next from last element of the first section to first elemnt of the second section but than it return index:0 and starts selecting the second element of the first section instead of the second elemnt of the second section.

It's a little bit hard to explain what I'm doing. Let's see the video: https://www.youtube.com/watch?v=1u_kwzTA3fQ

I need some solutions

CodePudding user response：

Today I wrote that one and it works almost properly but it still have some issues

$(document).ready(function() {
    $('.active').click();
});

let keepTheID = null;
let keepIndex = null;
$(document).on('click', '.select_item', function(e) {
    if (keepTheID !== $(this).attr('id')) {
        $('.active').removeClass('active');
        $(this).addClass('active');
        keepTheID = $(this).attr('id');
        keepIndex = $(this).index();
    }
});

$(document).on('click', '.next', function(e) {
    $('.active').removeClass('active');
    $('#'   keepTheID).click();
    keepIndex = keepIndex   1;
    let next = $('.select_item').eq(keepIndex).first().addClass('active');
    console.log(next);
});

$(document).on('click', '.prev', function(e) {
    $('.active').removeClass('active');
    $('#'   keepTheID).click();
    keepIndex = keepIndex - 1;
    let next = $('.select_item').eq(keepIndex).first().addClass('active');
    console.log(next);
});

html, body {
    padding: 0;
    margin: 0;
}
body {
    padding-bottom: 40px;
}
* {
    font-family: arial;
}
pre {
    font-family: monospace;
}
a {
    color: rgb(24, 111, 7);
}
h2.main {
    padding: 0;
    margin: 0;
    background-color: #333;
    color: #eee;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 34px;
    font-weight: normal;
}
div.main {
    font-size: 20px;
    background-color: #eee;
    padding: 0;
    margin: 0;
    padding: 6px 0;
    text-align: center;
    margin-bottom: 20px;
    font-weight: normal;
    box-shadow: 0px 2px 2px #aaa;
}
div.main .content {
    text-align: left;
}
div.main.contd {
    margin-top: 20px;
}
hr {
    border: 0;
    border-bottom: 2px solid #aaa;
    margin: 10px 0;
}
.content {
    margin: auto;
    width: 980px;
    overflow: hidden;
}
div.desc {
    font-size: 13px;
    line-height: 1.6;
    color: #222;
    padding-bottom: 15px;
    font-size: 15px;
}
div.desc strong {
    color: #000;
}
#buttons {
    margin-bottom: 10px;
    overflow: hidden;
    padding-bottom: 5px;
}
#buttons > * {
    float: left;
}
#buttons span {
    font-size: 12px;
    color: #333;
    font-weight: bold;
    padding: 5px 0;
}
#buttons a {
    display: inline-block;
    margin-left: 6px;
    padding: 5px 8px;
    cursor: pointer;
    background-color: #eee;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #555;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #222;
    color: #333;
}
#buttons a:hover {
    background-color: #555;
    color: #fff;
}
.leftpane .button {
    cursor: pointer;
    background-color: #eee;
    font-size: 12px;
    font-weight: normal;
    border: 1px solid #555;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #222;
    color: #333;
    width: 120px;
    padding: 6px 10px;
    margin: auto;
    margin-top: 10px;
    text-align: center;
    width: 320px;
    margin-bottom: 20px;
}
.leftpane {
    float: left;
    width: 395px;
    padding: 15px;
    background-color: rgb(214, 241, 145);
    border-radius: 8px;
}
.rightpane {
    float: left;
    font-size: 12px;
    margin-left: 15px;
}
.clear {
    float: none;
    clear: both;
}
pre.prettyprint {
    width: 520px;
    padding: 15px;
    padding-right: 0;
    margin: 0;
    line-height: 1.7;
}
pre.prettyprint span {
    font-family: monospace, courier new, courier;
}
pre.prettyprint.full {
    width: auto;
    padding: 6px 10px;
    margin-top: 10px;
    line-height: 1.3;
    font-size: 12px;
}
ol.desc {
    list-style-type: decimal;
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
}
ol.desc li {
    font-size: 15px;
    margin-top: 20px;
}
ol.desc li:first-child {
    margin-top: 0;
}
.active {
    background-color: #0aa !important;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div >
  <!--start first section-->
  <section >
    <div >First section</div>
    <div >
      <div  id="first_section_1">1</div>
      <div  id="first_section_2">2</div>
      <div  id="first_section_3">3</div>
      <div  id="first_section_4">4</div>
      <div  id="first_section_5">5</div>
      <div  id="first_section_6">6</div>
      <div  id="first_section_7">7</div>
      <div  id="first_section_8">8</div>
    </div>
  </section>
  <!--start second section-->
  <section >
    <div >Second section</div>
    <div >
      <div  id="second_section_1">1</div>
      <div  id="second_section_2">2</div>
      <div  id="second_section_3">3</div>
      <div  id="second_section_4">4</div>
      <div  id="second_section_5">5</div>
      <div  id="second_section_6">6</div>
      <div  id="second_section_7">7</div>
      <div  id="second_section_8">8</div>
    </div>
  </section>
</div>
<div >
  <div >
    <i ></i>
  </div>
  <div >
    <i ></i>
  </div>
</div>

Seems CSS doen't work on stackoverflow.

Source on codepen: https://codepen.io/webtm/pen/mdxMwrL?editors=1010

The issue: https://youtu.be/L4jUW5ZvcHE

CodePudding user response：

So, I solved the issues myself.

My code looks like this now:

$(document).ready(function() {
    $('.active').click();
});

let keepTheID = null;
$(document).on('click', 'body .select_item', function(e) {
    if (keepTheID !== $(this).attr('id')) {
        $('.active').removeClass('active');
        $(this).addClass('active');
        keepTheID = $(this).attr('id');
    }
});

let getNextSection = (section_id) => {
    let sections = $('.content_section');
    if (sections.length) {
        let outId = null;
        for (let index = 0; index < sections.length; index  ) {
            const element_id = sections.eq(index).attr('id');
            let plusindex = index   1;
            if (element_id == section_id && plusindex <= sections.length) {
                return sections.eq(plusindex).attr('id');
            }
        }
    }
};

let getLastSection = (section_id) => {
    let sections = $('.content_section');
    if (sections.length) {
        let outId = null;
        for (let index = 0; index < sections.length; index  ) {
            const element_id = sections.eq(index).attr('id');
            let plusindex = index - 1;
            if (element_id == section_id && plusindex >= sections.length) {
                return sections.eq(plusindex).attr('id');
            }
        }
    }
};

let current_item = null;

$(document).on('click', '.next', function(e) {
    // Keep current .active => #ID
    current_item = '#'   $('.active').attr('id');

    let next = $('.active').next();
    let lastNextId = null;

    if (typeof next.attr('id') === "undefined") {
        let current_section = $(current_item).closest('.content_section').attr('id');
        // console.log(current_section, 'ამ სექციაში მეტი ელემენტი აღარაა და შემდეგი სექცია მოვძებნოთ');

        let run = getNextSection(current_section);

        if (typeof run !== "undefined") {
            $('#'   run   ' .select_item:first').click();
            console.log(run);
            return false;
        }

        $('.content_section:first .select_item:first').click();
        return false;
    }

    $('.active').removeClass('active');
    next.addClass('active');
});

$(document).on('click', '.prev', function(e) {
    // Keep current .active => #ID
    current_item = '#'   $('.active').attr('id');

    let prev = $('.active').prev();
    let lastLastId = null;

    if (typeof prev.attr('id') === "undefined") {
        let current_section = $(current_item).closest('.content_section').attr('id');
        // console.log(current_section, 'ამ სექციაში მეტი ელემენტი აღარაა და შემდეგი სექცია მოვძებნოთ');

        let run = getLastSection(current_section);

        if (typeof run !== "undefined") {
            $('#'   run   ' .select_item:last').click();
            console.log(run);
            return false;
        }

        $('.content_section:first .select_item:last').click();
        return false;
    }

    $('.active').removeClass('active');
    prev.addClass('active');
});

Here are the code links. The resources may help someone in future.

Easier one: https://codepen.io/webtm/pen/mdxMwrL

Hard one: https://codepen.io/webtm/pen/ExEvbEW