logo
down
shadow

Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?


Toggle multiple classes with prevAll(), nextAll(), slice(), and duplicate classes... better way?

By : Abhijit Baishya
Date : November 22 2020, 10:38 AM
To fix the issue you can do If you post your html I can try to come up with another solution for the logic (if there is one), but until then, you can clean up the current js with the following:
code :
$( function() {

  var $container = $('.isotope').isotope({
    itemSelector: '.item'
  });

  $('.item').click(function() {
    var $this = $(this),
        $following = $this.nextAll(),
        $preceding = $this.prevAll();

    $this.toggleClass('zoom200');

    $this.prev().toggleClass('zoom100');
    $preceding.slice(5, 8).toggleClass('zoom100');
    $preceding.slice(11, 12).toggleClass('zoom75');
    $preceding.slice(15, 16).toggleClass('zoom75b');
    $preceding.slice(1, 5).toggleClass('zoom50');
    $preceding.slice(8, 10).toggleClass('zoom50b');
    $preceding.slice(19, 22).toggleClass('zoom50c');
    $preceding.slice(12, 15).toggleClass('zoom50d');

    $this.next().toggleClass('zoom100');
    $following.slice(5, 8).toggleClass('zoom100');
    $following.slice(11, 12).toggleClass('zoom75');
    $following.slice(15, 16).toggleClass('zoom75b');
    $following.slice(1, 5).toggleClass('zoom50');
    $following.slice(8, 10).toggleClass('zoom50b');
    $following.slice(19, 22).toggleClass('zoom50c');
    $following.slice(12, 15).toggleClass('zoom50d');

    $container.isotope('layout')
  });

});
$(function () {

    var $container = $('.isotope').isotope({
        itemSelector: '.item'
    });

    var CLASSES = [
        { start: 0, end: 1, name: 'zoom100'},
        { start: 1, end: 5, name: 'zoom50'},
        { start: 5, end: 8, name: 'zoom100'},
        { start: 8, end: 10, name: 'zoom50b'},
        { start: 11, end: 12, name: 'zoom75'},
        { start: 12, end: 15, name: 'zoom50d'},
        { start: 15, end: 16, name: 'zoom75b'},
        { start: 19, end: 22, name: 'zoom50c'}
    ];

    $('.item').click(function () {
        var $this = $(this),
            $following = $this.nextAll(),
            $preceding = $this.prevAll();

        for(var i = 0; i < CLASSES.length; i++) {
            $preceding.slice(CLASSES[i].start, CLASSES[i].end).toggleClass(CLASSES[i].name);
            $following.slice(CLASSES[i].start, CLASSES[i].end).toggleClass(CLASSES[i].name);
        }

        $this.toggleClass('zoom200');
        $container.isotope('layout')
    });

});


Share : facebook icon twitter icon
how to handle .nextAll() or .prevAll() - each element separately?

how to handle .nextAll() or .prevAll() - each element separately?


By : swatchwatch
Date : March 29 2020, 07:55 AM
wish of those help I am searching for something to make me able control separately each element returned by .prevAll() or .nextAll() jQuery methods. , $.each allows you access the DOM element using this:
code :
nextAll.each(function(index){
    // ...and do something with each returned element
    $(this).fadeTo('fast', index/5);
});
jQuery each nextAll prevAll

jQuery each nextAll prevAll


By : Ajelgeorge Poulose
Date : March 29 2020, 07:55 AM
To fix this issue nextAll is a function that needs to be executed, not a property that you are accessing. Needs to be this:
code :
$(this).nextAll().each(function(i,o){...});
How to remove nextall and prevall css color in jquery

How to remove nextall and prevall css color in jquery


By : axe
Date : March 29 2020, 07:55 AM
should help you out I proposed another solution using addClass/removeClass, and you can manage the css using the class active
code :
$('.listers').click(function(event) {
  var evt = $(this);
  var e_type = $(evt).attr('data-event-attribute');
  $('#collection-type').val(e_type);
  $('.listers').removeClass("active");
  $(this).addClass("active");

  event.preventDefault();
});
.active .fa {
  color: green;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span>Data 1
</div>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span> Data 2
</div>

<div class="listers" data-event-attribute="1">
  <span class="listlogo"><i class="fa fa-lock"></i></span> Data 3
</div>
How to Do Jquery equivalent of prevAll() nextAll() in AngularJS?

How to Do Jquery equivalent of prevAll() nextAll() in AngularJS?


By : atKo
Date : March 29 2020, 07:55 AM
EDIT: Selecting Multiple Classes then toggle classes for each of them

EDIT: Selecting Multiple Classes then toggle classes for each of them


By : user3414754
Date : March 29 2020, 07:55 AM
With these it helps Move the classes to an array of [class to find, class to toggle] . Iterate the array with Array.forEach(). Get all items for this class using document.querySelectorAll(). Iterate the items with NodeList.forEach(), and for each item toggle its respective class.
code :
const classes = [['.header__btn', 'header__btn--animate'], ['.wrap__content', 'wrap__content--slide'], ['.content__aside', 'content__aside--slide'], ['.nav', 'nav--slide']]

btn.addEventListener('click', () => {
  classes.forEach(([cls, clsToggle]) => 
    document.querySelectorAll(cls)
      .forEach(el => el.classList.toggle(clsToggle))
  )
})
Related Posts Related Posts :
  • knockout ajax call data-BIND
  • How do I create a variable with a number based on an element's number position using jquery?
  • Prevent fixed position element from flickering during jQuery animation
  • points are not visible clearly in nvd3 ghaph
  • How to write a regular expression for IP address format
  • Animate 3 DIVs from right to left when page is loading.
  • How to pivot columns in free jqgrid 4.15.4
  • the jquery method works fine but when made as a function not working
  • Show/hide text doesn't work when targeting link within div
  • multiple autocomplete search input fields
  • Display image in cell using Jquery jTable
  • jQuery and Wordpress - Scripts not working
  • flickering when mouse over, .hover() show/hide div(s)
  • Using Django's JSONResponseMixin to respond to AJAX requests
  • Unable to render charts using Wicked PDF
  • Style to dynamically created elements
  • hover not working for items in list
  • Keep server session alive automatically based on activity / input, using JQuery
  • jQuery load() taking a long time
  • Change / Exchange values in textboxes on text change in jquery
  • Unslider arrow code overriding slider options
  • what is the traditional way of sorting search results?
  • Do the action when the DIV comes in the display area of the browser with jQuery
  • jQuery slideshow overlapping CSS ribbon
  • JQuery animate function dont work
  • problems charts jquery highcharts
  • How to reset the select box values in Jquery sumoselect Multi select plugin
  • css absolute position on top of another element
  • How use jQuery String variable in html body
  • Get a row from table in view on modal bootstrap using codeigniter
  • How to make the effect of a div that covers an other div when scrolling?
  • Data binding using a button
  • How do i replace all dot in string to Underscore?
  • grab non-sibling element with jquery
  • Select a word and click it
  • Trigger modal instead redirect to /users/sign_in path, Rails 4 with devise
  • Combining Parent theme JS and CSS
  • Angular ui-grid - DropDown Selection shows Id
  • jquery addclass when there is content on body
  • JQUERY : CSS does not apply to dynamically created elements
  • Bootstrap multiselect dropdown checkbox not working on paginated table
  • JQuery scroll to dynamic id
  • Jquery first time tried ajax
  • Disable the link on the active tab (Bootstrap)
  • How to handle this validation when a div is added?
  • how to show/hide and check/uncheck checkboxes dynamically inside kendo grid
  • Conditional parameters for AJAX function
  • Jquery add class to input checkbox field
  • Bootstrap countdown timer Jquery
  • Open the closest modal of jQuery clicked element
  • change background color of specific button on click
  • Can I create link as post to 3rd party site and open in new tab?
  • ID is 'undefined' using .each()
  • Using .each() for targeting each child differently in Jquery
  • How to return data from functions in function
  • Execute this jquery only when viewport is bigger than
  • Bootbox showing white box behind dialog
  • Show/hide list items and add more/less link
  • Going through all occurences of class on slider change
  • Call jQuery valid() without updating the screen
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org