logo
down
shadow

How to wrap all siblings in one class after a class? (jQuery)


How to wrap all siblings in one class after a class? (jQuery)

By : AerospaceP
Date : November 22 2020, 09:00 AM
Does that help You could iterate over each .blog-home-thumb element, select all the following sibling elements using the .nextAll() method, and then use the .wrapAll() method:
Example Here
code :
$('.blog-home-thumb').each(function () {
    $(this).nextAll().wrapAll('<div class="blog-home-content"></div>');
});


Share : facebook icon twitter icon
jquery add class to all siblings except 1

jquery add class to all siblings except 1


By : user2661649
Date : March 29 2020, 07:55 AM
around this issue You can also use the .not command to filter out anything from a set that you don't want. This is an alternative to passing in a CSS :not pseudo class selector as mentioned by Matt.
code :
$(this).parent().siblings().not(".divider").addClass("transparent");
link.addEventListener("click", function addClasses() {
    var li = this.parentNode,
        lis = li.parentNode.children;

    [].forEach.call(lis, function addClassIfCorrect(el) {
        var classList = el.classList
        if (el !== li && !classList.contains("divider")) {
            classList.add("transparent");
        }
    });
});
jQuery Siblings with sub Class?

jQuery Siblings with sub Class?


By : user3663208
Date : March 29 2020, 07:55 AM
I wish this help you From the docs:
code :
$(this).siblings(".divRe").find(".divAbs")
jQuery: Select elements of class X that have no siblings with that class

jQuery: Select elements of class X that have no siblings with that class


By : Ge Ta
Date : March 29 2020, 07:55 AM
I wish this helpful for you It is not that elegant but it does the trick using the :first-child pseudo-selector and filtering the result set with .filter():
code :
var a = $('.test:first-child').filter(function() {
    //return $(this).parent().find('.test').not(this).length == 0;
    return !$(this).siblings('.test').length
});
jQuery check siblings with certain class

jQuery check siblings with certain class


By : BrettMichael
Date : March 29 2020, 07:55 AM
it should still fix some issue I'm working on a site that has a weird html formatting. See html below. Basically when a checkbox .group is clicked on, All the .item checkboxes that follows should get checked until it hits the next .groupparent div. How would approach this. Note: there's also a number inside tags that we can also use to count the next .items that need to be checked. I appreciate your input. I'm using jQuery. , I'm assuming the class name as groupparent then I think this will do
code :
$(this).parent().nextUntil('.groupparent').filter('.item')
jQuery wrap each class + class elements ( different classes )

jQuery wrap each class + class elements ( different classes )


By : user2412
Date : March 29 2020, 07:55 AM
around this issue Your current approach is flawed as you loop over both the .black and .blue elements, only try to detect following .black elements, and also because you use hasClass(), which returns a boolean value, yet try to then call a method on it.
To achieve this you can loop over every .black and determine if the next() element is .blue. If it is you can wrap them both in a div, like this:
code :
$('.black').each(function() {
  var $this = $(this);
  var $next = $this.next();
  if ($next.is('.blue'))
    $this.add($next).wrapAll('<div class="wrap"></div>');
});
.red { color: red; }
.black { color: black; }
.blue { color: blue; }
.white { color: white; }
.yellow { color: yellow; }

.wrap { 
  border: 1px dotted #CCC;
  background-color: #EEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
<div class="col red">Foo</div>
<div class="col white">Foo</div>
<div class="col yellow">Foo</div>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
$('.black').each(function() {
  var $this = $(this);
  if ($this.next().is('.blue')) {
    $this.add($this.nextUntil(':not(.blue)')).wrapAll('<div class="wrap"></div>');
  }
});
.red { color: red; }
.black { color: black; }
.blue { color: blue; }
.white { color: white; }
.yellow { color: yellow; }

.wrap { 
  border: 1px dotted #CCC;
  background-color: #EEE;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
<div class="col red">Foo</div>
<div class="col white">Foo</div>
<div class="col yellow">Foo</div>
<div class="col red">Foo</div>
<div class="col black">Foo</div>
<div class="col blue">Foo</div>
<div class="col blue">Foo</div>
<div class="col blue">Foo</div>
<div class="col red">Foo</div>
Related Posts Related Posts :
  • How to increase jqgrid header checkbox size
  • Compile directive within controller and return html to DataTable's render function
  • how to change each consecutive div order?
  • Replace submit button value with ASCII character
  • Make mmenu expand to the current url
  • Uncaught TypeError: "#submitRates".click is not a functio
  • ACF Tag It Field and createTag
  • Original filename in case of error in jQuery File Upload
  • Cycle through an HTML list with jinja and jQuery?
  • jQuery Ajax triggering 2 events together from single click
  • jQuery UI draggable and sortable not working
  • jquery access dynamically generated form
  • Typeahead - Unable to use dynamically created array as source of data
  • Toggle other specific classes off when toggling one on
  • Changing aria-label for ascending and descending states on a sortable table with Jquery
  • Sending var with load jquery
  • Appending an object to serialized form data
  • how to replace jquery to jquery mobile
  • jquery show/hide buttons on same row not showing pretty - causing half hight during animation?
  • <select> change event doesn't work
  • jQuery hover/click on desktop and mobile devices
  • Use Jquery and FormData to submit form fields and uploaded File to Spring MVC Controller in Spring Boot App
  • Is there a smart way to simplify these jquery codes?
  • JQuery File Upload middleware - Image versions not creating
  • How to increase cookies storage limit(4096) in chrome
  • div on translating increases page width
  • How do I set shipping value depending on select & checkbox
  • jQuery change active state of multiple elements on page when different categories are selected
  • rails jquery script does not work when clicking link
  • Array of JQuery Selectors
  • how can I target with jquery this element?
  • Display default date based on time in jquery datepicker
  • Changing date format before binding JSON data to a jquery template
  • How to use load and open in same div
  • How to make position fixed div scroll horizontally?
  • save state the list on page refresh
  • Change the value of many Divs on select of drop-down
  • Background-image transition not working
  • http request inside another http request success response not working in jquery
  • jQuery hover is not working when I use display:none property of my input
  • Limit jQuery toggle to only affect one accordion
  • Changing div values when dropdown is selected
  • How to replace a list of images with jQuery?
  • jQuery Clone / Copy Style attributes of first td of Table to another Tables's first td
  • Why my select only get the last value?
  • fullpage.js multiple onLeave and afterLoad events
  • Insightly CRM Ajax API proxy
  • Highlighting the Menu Item for the Current Page Wordpress
  • Value change event is not firing in jquery
  • Add text after first element
  • My generic click event for anchors doesn't work
  • jQuery append - what am I doing wrong?
  • how to align jqgrid 4.10 column headers and data
  • Make image stay where it is
  • Rails jQuery-autocomplete client-side
  • Create array from xml nodes using jquery
  • Simple jQuery Each Function
  • multiple selectors with .removeAttr
  • How to automatically input a value in a text box based on another and vice versa?
  • Apply hover-effect on transparent parts of SVG
  • shadow
    Privacy Policy - Terms - Contact Us © animezone.co