affect all classes before or after-CodePudding

i was trying to make a filter for my svg map and i would like to press the filter and all classes after the one i pressed, change to gray, for exemplo:

i have the classes { varcor2, varcor2e1, varcor2e2, varcor2e3, varcor2e4, varcor2e5, varcor2e6, varcor2e7, varcor2e8, varcor2e9, varcor3, etc... } (i have more then this one's)

and i would like to press for example, varcor2e5 and all the path with the classe's varcor2e6, varcor2e7, varcor2e8, varcor2e9, varcor3, etc... .css("fill", "#969696") and the varcor2e5 and before that .css("fill", "") so he can get the respective color from css

Now i can afect only the one i pressed, i tryed to use .next(), .nextAll(), .prev() and .prevAll() but it didnt worked out

can someone help me with this script?

$(".coresfiltro").click(function () {
    // var n = $(".coresfiltro").length;
    $(this).prevAll().removeClass("pintarnoclick").removeClass("ultimofiltroescolhido");
    $(this).nextAll().addClass("pintarnoclick").removeClass("ultimofiltroescolhido");
    $(this).addClass("ultimofiltroescolhido");
    $('.coresfiltro').removeClass("clickedfiltrocor");
    $(this).addClass("clickedfiltrocor");
    if ($('#cor2e0').hasClass('clickedfiltrocor')) {
        $('.varcor2').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e1').hasClass('clickedfiltrocor')) {
        $('.varcor2e1').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e2').hasClass('clickedfiltrocor')) {
        $('.varcor2e2').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e3').hasClass('clickedfiltrocor')) {
        $('.varcor2e3').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e4').hasClass('clickedfiltrocor')) {
        $('.varcor2e4').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e5').hasClass('clickedfiltrocor')) {
        $('.varcor2e5').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e6').hasClass('clickedfiltrocor')) {
        $('.varcor2e6').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e7').hasClass('clickedfiltrocor')) {
        $('.varcor2e7').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e8').hasClass('clickedfiltrocor')) {
        $('.varcor2e8').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor2e9').hasClass('clickedfiltrocor')) {
        $('.varcor2e9').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    } else if ($('#cor3e0').hasClass('clickedfiltrocor')) {
        $('.varcor3').addClass("selectedfiltrocor");
        $('path').not(".selectedfiltrocor").css("fill", "#969696");

    }
});

.mapasvg {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
}

.mapasvg svg {
  width: auto;
  height: 100%;
  fill: #969696;
  stroke: #ffffff;
  stroke-width: 1px;
}

.mapasvg svg #AF {
  fill: #BE24A0;
}

.mapasvg svg #AE {
  fill: #C83487;
}


.escalageral {
  display: flex;
  width: 96%;
  max-width: 400px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.escalamap {
  width: 96%;
  max-width: 300px;
  height: 25px;
  margin: 0;
  border: 2px solid #ffffff;
  box-shadow: 0px 0px 25px #000000;
  border-radius: 5px;
  position: relative;
}

.escalamap .mapscale {
  background: #4945c5;
  background: linear-gradient(90deg, #4945c5 0%, #9c22b9 50%, #eb6b33 85%, #fff701 100%);
  width: 100%;
  height: 100%;
}

.escalamap .filtroporcores {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.escalamap .filtroporcores .coresfiltro {
  height: 100%;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div  id="mapaworld">
                        <?xml version="1.0"?>
                        <svg baseprofile="tiny" fill="#ececec" height="857" stroke="black" stroke-linecap="round"
                            stroke-linejoin="round" stroke-width=".2" version="1.2" viewbox="0 0 2000 857" width="2000"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z"
                                id="AF"  name="Afghanistan" data-toggle="tooltip"
                                data-placement="top" data-html="true"
                                title='<span >2,4</span>Afeganistão'>
                            </path>
                            <path 
                                d="M 1121.2 572 1121.8 574 1121.1 577.1 1122 580.1 1121.1 582.5 1121.5 584.7 1109.8 584.6 1109 605.1 1112.6 610.3 1116.2 614.3 1105.8 616.9 1092.3 616 1088.5 613 1065.8 613.2 1065 613.7 1061.7 610.8 1058.1 610.6 1054.7 611.7 1052 612.9 1051.5 608.9 1052.4 603.2 1054.4 597.3 1054.7 594.6 1056.6 588.8 1058 586.2 1061.3 582 1063.2 579.1 1063.8 574.4 1063.5 570.7 1061.9 568.4 1060.4 564.5 1059.1 560.7 1059.4 559.3 1061.1 556.8 1059.5 550.6 1058.3 546.3 1055.5 542.2 1056.1 541 1058.4 540.1 1060.1 540.2 1062.1 539.5 1078.8 539.6 1080.1 544.3 1081.7 548.2 1083 550.3 1085.1 553.6 1088.9 553.1 1090.7 552.2 1093.8 553.1 1094.7 551.5 1096.2 547.8 1099.7 547.5 1100 546.4 1102.9 546.4 1102.4 548.7 1109.2 548.6 1109.3 552.7 1110.4 555.1 1109.5 559 1109.9 563 1111.7 565.4 1111.3 573 1112.7 572.4 1115.1 572.6 1118.6 571.6 1121.2 572 Z">
                            </path>
                            <path 
                                d="M 1055.3 539 1053.8 534.2 1056.1 531.4 1057.8 530.3 1059.9 532.5 1057.9 533.9 1056.9 535.5 1056.7 538.3 1055.3 539 Z">
                            </path>
                            <path
                                d="M1088 228l0.4 1.2 1.4-0.6 1.2 1.7 1.3 0.7 0.6 2.3-0.5 2.2 1 2.7 2.3 1.5 0.1 1.7-1.7 0.9-0.1 2.1-2.2 3.1-0.9-0.4-0.2-1.4-3.1-2.2-0.7-3 0.1-4.4 0.5-1.9-0.9-1-0.5-2.1 1.9-3.1z"
                                id="AL" name="Albania">
                            </path>
                            <path
                                d="M1296.2 336.7l1.3 5.1-2.8 0 0 4.2 1.1 0.9-2.4 1.3 0.2 2.6-1.3 2.6 0 2.6-1 1.4-16.9-3.2-2.7-6.6-0.3-1.4 0.9-0.4 0.4 1.8 4.2-1 4.6 0.2 3.4 0.2 3.3-4.4 3.7-4.1 3-4 1.3 2.2z"
                                id="AE"  name="United Arab Emirates" data-toggle="tooltip"
                                data-placement="top" data-html="true"
                                title='<span >6,6</span>Emirados Árabes Unidos'>
                            </path>
                            <path  data-toggle="tooltip" data-placement="top"
                                data-html="true" title='<span >6</span>Argentina'
                                d="M 669.1 851.7 666.1 851.5 661.1 851.5 655.1 837.9 658.2 840.7 662.5 845.3 670.3 849 677.6 850.5 676.8 853.5 672.4 853.8 669.1 851.7 Z">
                            </path>
     
                        </svg>
                    </div>
  <div >
                            
                            <div >
                                <div >
                                    <div  id="cor2e0" data-toggle="tooltip" data-placement="top" title="2"></div>
                                    <div  id="cor2e1" data-toggle="tooltip" data-placement="top" title="2,1"></div>
                                    <div  id="cor2e2" data-toggle="tooltip" data-placement="top" title="2,2"></div>
                                    <div  id="cor2e3" data-toggle="tooltip" data-placement="top" title="2,3"></div>
                                    <div  id="cor2e4" data-toggle="tooltip" data-placement="top" title="2,4"></div>
                                    <div  id="cor2e5" data-toggle="tooltip" data-placement="top" title="2,5"></div>
                                    <div  id="cor2e6" data-toggle="tooltip" data-placement="top" title="2,6"></div>
                                    <div  id="cor2e7" data-toggle="tooltip" data-placement="top" title="2,7"></div>
                                    <div  id="cor2e8" data-toggle="tooltip" data-placement="top" title="2,8"></div>
                                    <div  id="cor2e9" data-toggle="tooltip" data-placement="top" title="2,9"></div>
                                    <div  id="cor3e0" data-toggle="tooltip" data-placement="top" title="3"></div>
                                    <div  id="cor3e1" data-toggle="tooltip" data-placement="top" title="3,1"></div>
                                    <div  id="cor3e2" data-toggle="tooltip" data-placement="top" title="3,2"></div>
                                    <div  id="cor3e3" data-toggle="tooltip" data-placement="top" title="3,3"></div>
                                    <div  id="cor3e4" data-toggle="tooltip" data-placement="top" title="3,4"></div>
                                    <div  id="cor3e5" data-toggle="tooltip" data-placement="top" title="3,5"></div>
                                    <div  id="cor3e6" data-toggle="tooltip" data-placement="top" title="3,6"></div>
                                    <div  id="cor3e7" data-toggle="tooltip" data-placement="top" title="3,7"></div>
                                    <div  id="cor3e8" data-toggle="tooltip" data-placement="top" title="3,8"></div>
                                    <div  id="cor3e9" data-toggle="tooltip" data-placement="top" title="3,9"></div>
                                    <div  id="cor4e0" data-toggle="tooltip" data-placement="top" title="4"></div>
                                    <div  id="cor4e1" data-toggle="tooltip" data-placement="top" title="4,1"></div>
                                    <div  id="cor4e2" data-toggle="tooltip" data-placement="top" title="4,2"></div>
                                    <div  id="cor4e3" data-toggle="tooltip" data-placement="top" title="4,3"></div>
                                    <div  id="cor4e4" data-toggle="tooltip" data-placement="top" title="4,4"></div>
                                    <div  id="cor4e5" data-toggle="tooltip" data-placement="top" title="4,5"></div>
                                    <div  id="cor4e6" data-toggle="tooltip" data-placement="top" title="4,6"></div>
                                    <div  id="cor4e7" data-toggle="tooltip" data-placement="top" title="4,7"></div>
                                    <div  id="cor4e8" data-toggle="tooltip" data-placement="top" title="4,8"></div>
                                    <div  id="cor4e9" data-toggle="tooltip" data-placement="top" title="4,9"></div>
                                    <div  id="cor5e0" data-toggle="tooltip" data-placement="top" title="5"></div>
                                    <div  id="cor5e1" data-toggle="tooltip" data-placement="top" title="5,1"></div>
                                    <div  id="cor5e2" data-toggle="tooltip" data-placement="top" title="5,2"></div>
                                    <div  id="cor5e3" data-toggle="tooltip" data-placement="top" title="5,3"></div>
                                    <div  id="cor5e4" data-toggle="tooltip" data-placement="top" title="5,4"></div>
                                    <div  id="cor5e5" data-toggle="tooltip" data-placement="top" title="5,5"></div>
                                    <div  id="cor5e6" data-toggle="tooltip" data-placement="top" title="5,6"></div>
                                    <div  id="cor5e7" data-toggle="tooltip" data-placement="top" title="5,7"></div>
                                    <div  id="cor5e8" data-toggle="tooltip" data-placement="top" title="5,8"></div>
                                    <div  id="cor5e9" data-toggle="tooltip" data-placement="top" title="5,9"></div>
                                    <div  id="cor6e0" data-toggle="tooltip" data-placement="top" title="6"></div>
                                    <div  id="cor6e1" data-toggle="tooltip" data-placement="top" title="6,1"></div>
                                    <div  id="cor6e2" data-toggle="tooltip" data-placement="top" title="6,2"></div>
                                    <div  id="cor6e3" data-toggle="tooltip" data-placement="top" title="6,3"></div>
                                    <div  id="cor6e4" data-toggle="tooltip" data-placement="top" title="6,4"></div>
                                    <div  id="cor6e5" data-toggle="tooltip" data-placement="top" title="6,5"></div>
                                    <div  id="cor6e6" data-toggle="tooltip" data-placement="top" title="6,6"></div>
                                    <div  id="cor6e7" data-toggle="tooltip" data-placement="top" title="6,7"></div>
                                    <div  id="cor6e8" data-toggle="tooltip" data-placement="top" title="6,8"></div>
                                    <div  id="cor6e9" data-toggle="tooltip" data-placement="top" title="6,9"></div>
                                    <div  id="cor7e0" data-toggle="tooltip" data-placement="top" title="7"></div>
                                    <div  id="cor7e1" data-toggle="tooltip" data-placement="top" title="7,1"></div>
                                    <div  id="cor7e2" data-toggle="tooltip" data-placement="top" title="7,2"></div>
                                    <div  id="cor7e3" data-toggle="tooltip" data-placement="top" title="7,3"></div>
                                    <div  id="cor7e4" data-toggle="tooltip" data-placement="top" title="7,4"></div>
                                    <div  id="cor7e5" data-toggle="tooltip" data-placement="top" title="7,5"></div>
                                    <div  id="cor7e6" data-toggle="tooltip" data-placement="top" title="7,6"></div>
                                    <div  id="cor7e7" data-toggle="tooltip" data-placement="top" title="7,7"></div>
                                    <div  id="cor7e8" data-toggle="tooltip" data-placement="top" title="7,8"></div>
                                    <div  id="cor7e9" data-toggle="tooltip" data-placement="top" title="7,9"></div>
                                    <div  id="cor8e0" data-toggle="tooltip" data-placement="top" title="8"></div>
                                    <!-- <div  id="escolherofiltro"></div> -->

                                </div>
                                <div >

                                </div>
                            </div>
                            
                        </div>

i tried put some of my svg (it is a world map) and i put there my menu, it work's with the click

CodePudding user response：

For selecting prev/next items your should use prevAll and nextAll as you said. So something like this? https://jsfiddle.net/3xw8cp9n/

$(document).on("click", "li", function (e) {
  $(this).css("background-color", "green");
  $(this).prevAll().css("background-color", "green");
  $(this).nextAll().css("background-color", "red");
});

CodePudding user response：

prevAll() and nextAll() should work for you. But I modified your script with a longer solution with a lot of assumptions. Test and add to it, maybe it will work for you. it involves finding the number of elements you want to change using the parent (first line) and also finding the index of the clicked item, then stepping up and down with a loop. The loops can be changed, but you got the idea.

 let numberOfChildren = $('.parentOfTargetChildren').children().length;  //Assuming you have the parent of the elements you want to target
 $(".coresfiltro").click(function () {
     
         let clickedIndexRelatedToSiblings = $(this).index();   /// index of the element in relation to its siblings
    
         //Step down the tree
         let i_prev  = clickedIndexRelatedToSiblings; 
         while (i_prev >= 0) {
            $(`.parentOfTargetChildren:nth-child("`  i_prev  `")`).removeClass("pintarnoclick").removeClass("ultimofiltroescolhido");  
            i_prev--;
          }  
    
          //Step up the tree
          let i_next  = clickedIndexRelatedToSiblings; 
          while (i_next < numberOfChildren) {
             $(`.parentOfTargetChildren:nth-child("`  i_next  `")`).addClass("pintarnoclick").removeClass("ultimofiltroescolhido");  
             i_next  ;
          }  
     
    
        //Your code  
    
        $(this).addClass("ultimofiltroescolhido");
        $('.coresfiltro').removeClass("clickedfiltrocor");  //why remove this class and add it in the next line??  They reference the same object
        $(this).addClass("clickedfiltrocor"); 

    //......
    //rest of the code  

 });