I need to wrapAll divs that are children of li except the div with class A. Also need to keep them in their parent li's.
Current html:
<ul class="container">
<li>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
</li>
<li>
<div class="a"></div>
<div class="b"></div>
<div class="b"></div>
</li>
</ul>
Desired output:
<ul class="container">
<li>
<div class="a"></div>
<div class="wrapped">
<div class="b"></div>
<div class="c"></div>
</div>
</li>
<li>
<div class="a"></div>
<div class="wrapped">
<div class="b"></div>
<div class="c"></div>
</div>
</li>
</ul>
Thought this code would do it but it's not working. I would like to use a variable to define the selected divs:
var selected = $("li").children().not(".a");
$(selected).each(function() {
$(selected).wrapAll($("<div class='wrapped'></div>"));
});
Iterate over each li and then wrap it's children which don't have class a.
wrapAll will wrap all possible matched elements, so it'll also wrap the matched elements from other li.
$('li').each(function() {
$(this).children().not('.a').wrapAll('<div class="wrapped"></div>');
});
.wrapped {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="container">
<li>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
</li>
<li>
<div class="a">A</div>
<div class="b">B</div>
<div class="b">B</div>
</li>
</ul>
Related
I have a list of div with the same class. Each div contains other divs, .header, .body, .footer. When I hover on one of the elements inside one div, for example .header, I need to add/remove a class on the another .footer element inside the same div.
The problem is when I hover one .header - I'm adding class to all .footer elements inside all other div's but I need to add new class only to the .footer inside the current div.
$(document).ready(function() {
$('.header').hover(function() {
$('.footer').addClass('active');
}, function() {
$('.footer').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
<div class="list_item">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>
</div>
You could use the :hover pseudo in CSS and the general sibling combinator selector ~
.list_item:hover .header:hover ~ .footer {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
otherwise, if you cannot rely on .footer being a next sibling - use jQuery
jQuery(function($) {
$('.header').hover(function() {
$(this).closest('.list_item').find('.footer').toggleClass('active');
});
});
.active {
background: red;
}
<div class="list">
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
<div class="list_item">
<div class="header">Hover me</div>
<div class="body">B</div>
<div class="footer">F</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You should be doing it relative to this (which is the current hovered header) and you can use nextAll if that is the only footer in the grouping:
$('.header').hover(function() {
$(this).nextAll('.footer').addClass('active');
},
function() {
$(this).nextAll('.footer').removeClass('active');
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
<div class="list_item">
<div class="header"> header </div>
<div class="body"> body </div>
<div class="footer"> footer </div>
</div>
</div>
Yes can try below code snippet, I have tested it already.
$(document).ready(function() {
$('.header').hover(function(){
$(this).siblings(".footer").addClass('active');
},
function(){
$(this).siblings(".footer").removeClass('active');
});
});
You need to add different ID property all some div, get $('#footer3') and change it
I am trying to restructure elements. The problem I face is that the elements do not have unique classes or IDs. So if, for example, a .prependTo is being called, it moves obviously all matching elements. HTML looks like this (important: real scenario contains hundreds of <li> elements):
<div id="top-element">
<ul>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example</div>
</div>
</li>
</ul>
</div>
So I want to move text3 as the first child of text-parent. But only in its own parent element. So text3 should not move to the other <li> elements. I have tried this, but it's not correct, it still crosses all elements:
$('.text3').parent('.text-parent').prependTo('.text-parent');
How do I limit the function to its parents?
Your code is wrong because it select all .text-parent and insert every one in another. You need to loop through .text3 using .each() and in function select relevant parent of elements.
$('.text3').each(function(){
$(this).parent().prepend(this);
// Or
$(this).parent('.text-parent').prepend(this);
// Or
$(this).prependTo($(this).parent('.text-parent'));
});
$('.text3').each(function(){
$(this).parent().prepend(this);
});
.text-parent {border: 1px solid #000}
.text-parent > .text3 {color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-element">
<ul>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example2</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example2</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example2</div>
<div class="text3">example3</div>
</div>
</li>
</ul>
</div>
You can use insertBefore
Insert every element in the set of matched elements before the target.
$(this).insertBefore($(this).siblings('.text1'));
$(".text3").each(function(){
$(this).insertBefore($(this).siblings('.text1'));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top-element">
<ul>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example3</div>
</div>
</li>
<li>
<div class="image"></div>
<div class="text-parent">
<div class="text1">example</div>
<div class="text2">example</div>
<div class="text3">example3</div>
</div>
</li>
</ul>
</div>
I have the following html:
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message"></div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message"></div>
</div>
This is my ns.init function:
ns.init = function() {
$(".message").hide();
$(".interrogation").click(function(){
$(".interrogation").closest(".group").parent().find(".message").toggle();
});
}
The current code works but it toggles all the messages on the page when I click one of them. How can I make it toggle only the message that is exactly after the question mark ?
That is because you use $(".interrogation") selector in your function. This selects all elements with that class in the document. Use $(this) to only have the element that you clicked on as reference for your selector.
Here is a working fiddle:
$(function() {
$(".message").hide();
$(".interrogation").click(function(){
$(this).closest(".group").parent().find(".message").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message2</div>
</div>
Here you go with a solution https://jsfiddle.net/denquhL1/1/
$('.interrogation').click(function(){
$(this).closest('div.group').next('div.message').slideToggle();
});
.message{
display: none;
}
.interrogation {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message 1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Message 2</div>
</div>
Onclick of .interrogation class, it will traverse to closest .group container, then it will look for next .message container.
Instead of toggle, I've used slideToggle with animation.
Hope this will help you.
Something like this?
var ns = {};
ns.init = function() {
$(".message").hide()
$(".interrogation").click(function() {
var commonParent = $(this).closest(".col-md-12");
commonParent.find(".message").toggle();
});
}
ns.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Msg 1</div>
</div>
<div class="col-md-12">
<div class="group">
<div class="label">
<li class="interrogation">?</li>
</div>
</div>
<div class="message">Msg 2</div>
</div>
i`m trying to remove all .col-md-1 class from all child element in particular div.
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class"question-list">
<div class="row">
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
<div class = "col-md-1">
<li class="question-item" id="javatbd74656737">
<div class="checkbox">...</div>
</li>
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
i now its deeply nested, but that is what i got from a dynamically generated html. i have to somehow access this particular question div. and delete the .col-md-1 from all the child div.
thanks for help !
you can use jQuery removeClass() function for this..
$('.question-list .col-md-1').removeClass('col-md-1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class"question-list">
<div class="row">
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
You can use the the find() and removeClass methods for that.
$('#parentElement').find('.col-md-1').removeClass('col-md-1');
Get all the elements inside your #question123 and your .question-list and use removeClass for removing the class
$('#question123 .question-list .col-md-1').removeClass('col-md-1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question123">
<div class="panel-title">
....
</div>
<div class="panel-body">
<div class="answer clearfix">
<h3> ... </h3>
<div class="answer clearfix">
<ul class="question-list">
<div class="row">
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
<div class = "col-md-1">
....
</div>
</div>
</ul>
</div>
</div>
</div>
</div>
For a non-jQuery approach - you can get all the divs with that class using querySelectorAll and then remove the class.
var elements= document.querySelectorAll('.question-list .col-md-1');
elements.forEach(function(el){
el.classList.remove('col-md-1');
})
Lets say this is my HTML
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
</ul>
Now I want to wrap .product-thumbnail and .product-price in
<div class="left"></div>
Like this
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
</ul>
This code does the trick if I had only one list item
$(".product-thumbnail, .product-price").wrapAll("<div class='left'></div>");
I've tried an each() on .product-thubnail and .product-price but without results..
Does anyone know how I could do this or how it could be done with each()?
Iterate over the .product-title using each() method and combine with the immediate next element using add() method.
$('.product-title').each(function() {
$(this).add($(this).next()).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
Or iterate over the li and get both classes within the element by providing the context.
$('.product').each(function() {
$('.product-title,.product-thumbnail', this).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>