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>
Related
I have multiple divs in a row. I want to set height dynamically to each div based on the highest content in div. Height should be equal to all divs.
Can you all please help me to solve this with javascript/jquery?
Below is the code:
<div class="table-cellprop">
<div class="bottom-pane">
<div class="content-info">
<p>some imp text </p>
<h3>title </h3>
<div class="text-left"> some text with info
<h4>title 2 </h4>
<ul>
<li class="bm-list"> li one </li>
<li class="cm-list"> two </li>
<li class="mm-list"> three </li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextText </div>
</div>
</div>
You don't actually need javascript. You can use flexbox.
.flex-container {
display: flex;
flex-direction: row;
}
.table-cellprop {
flex: 1;
overflow: auto;
}
.table-cellprop:nth-child(1) {
background-color: #b9f6ca;
}
.table-cellprop:nth-child(2) {
background-color: #84ffff;
}
.table-cellprop:nth-child(3) {
background-color: #b388ff;
}
<div class="flex-container">
<div class="table-cellprop">
<div class="bottom-pane">
<div class="content-info">
<p>some imp text </p>
<h3>title </h3>
<div class="text-left"> some text with info
<h4>title 2 </h4>
<ul>
<li class="bm-list"> li one </li>
<li class="cm-list"> two </li>
<li class="mm-list"> three </li>
</ul>
</div>
</div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextTextTextTextTextTextTextTextTextText </div>
</div>
</div>
<div class="table-cellprop card-btm">
<div class="bottom-pane">
<div class="content-info"> TextTextTextText </div>
</div>
</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>
fiddle: https://jsfiddle.net/nLr39kbr/1/
Been at this for hours but no luck. Trying to combine Sortable's basic UL List (the first example in the demo) with the "Multi" (more than 2 lists) ability (the second example), but in the demo it's using img's intead of li's
Basic UL lists:
<div class="layer">
<ul id="foo" class="block__list block__list_tags">
<li>1111</li>
<li>2222</li>
</ul>
</div>
<div class="layer">
<ul id="bar" class="block__list block__list_words">
<li>444</li>
<li>555</li>
</ul>
</div>
</div>
Multi connected lists:
<div class="layer tile">
<div class="tile__name">Group A</div>
<div class="tile__list">
<img src="st/face-01.jpg"/>
<img src="st/face-02.jpg"/>
</div>
</div>
<div class="layer tile" >
<div class="tile__name">Group B</div>
<div class="tile__list">
<img src="st/face-05.jpg"/>
<img src="st/face-06.jpg"/>
</div>
</div>
<div class="layer tile">
<div class="tile__name">Group D</div>
<div class="tile__list">
<img src="st/face-08.jpg"/>
<img src="st/face-09.jpg"/>
</div>
</div>
</div>
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>