I've these divs
<div class="col_1_6"></div>
<div class="col_1_4"></div>
<div class="col_1_6"></div>
<div class="col_1_4"></div>
<div class="col_1_4"></div>
<div class="col_1_6"></div>
I want whatever the order of the divs, wrap col_1_4 and col_1_6 in a div called row_content
<div class="row_content">
<div class="col_1_6"></div>
<div class="col_1_4"></div>
</div>
<div class="row_content">
<div class="col_1_4"></div>
<div class="col_1_6"></div>
</div>
I already try this :
$('.col_1_6, .col_1_4').wrapAll('<div class="row"></div>')
But it wrap all the divs not each two divs.
Thanks for the help.
You can select all your divs and then do a for loop that increment by 2 every iteration.
With the index of the loop, you can then use .slice on the jQuery element and that wrap your divs.
var $divs = $('.col_1_6, .col_1_4');
for(var i = 0; i < $divs.length; i+=2){
$divs.slice(i, i+2).wrapAll('<div class="row"></div>');
console.log($divs);
}
.row{
background: red;
margin : 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col_1_6">1</div>
<div class="col_1_4">2</div>
<div class="col_1_6">3</div>
<div class="col_1_4">4</div>
<div class="col_1_4">5</div>
<div class="col_1_6">6</div>
I've found this method which works
$(".col_1_6").each(function(index) {
$(this).next(".col_1_4").andSelf().wrapAll("<div class='row' />")
});
but this only work if all div are in this order .col_1_6 > .col_1_4 and not .col_1_4 > col_1_6 as in your html
http://jsfiddle.net/mrjx9dav/11/
Another not-so-pretty solution that wraps every 2 divs that has the class starting with col_1.
$('div[class^="col_1"]').each(function(ind) {
ind%2 === 0 && ($(this).add($(this).next()).wrapAll('<div class="row"></div>'));
});
-Demo-
Related
i have this html collection, i want if i click on any div class ".sday"
any other div that are present after that be remove .
for example if we click on sday 2 we should keep sday1 and sday 2, and 3 and 4 must delete
my script removing count is ok but it delete wrong div.
any idea?
<div id="parent" class="parent">
<div class="room-sheet">
<div class="sday">1</div>
</div>
<div class="room-sheet">
<div class="sday">2</div>
</div>
<div class="room-sheet">
<div class="sday">3</div>
</div>
<div class="room-sheet">
<div class="sday">4</div>
</div>
</div>
script(using jquery)
<script>
$(".sday").click(function(){
console.log("hello");
var parentElement = $(this).parent().parent().find('.room-sheet');
var parentChildernCount = $(this).parent().parent().find('.room-sheet').length;
var elementIndex = $(this).closest('.room-sheet').index();
var dd = parentChildernCount - elementIndex;
for(let i=elementIndex; i < dd; i++){
//note: make sure any element after our index in deleted!!!
$("#parent").find('.room-sheet').children().eq(i).remove();
}
})
</script>
Listen for clicks on a .sday on the parent, navigate to the parent of the clicked .sday (a .room-sheet), call nextAll to get all subsequent siblings, and .remove() them:
$('#parent').on('click', '.sday', function() {
$(this).parent().nextAll().remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent" class="parent">
<div class="room-sheet">
<div class="sday">1</div>
</div>
<div class="room-sheet">
<div class="sday">2</div>
</div>
<div class="room-sheet">
<div class="sday">3</div>
</div>
<div class="room-sheet">
<div class="sday">4</div>
</div>
</div>
Also, there's no need to require a big library like jQuery for something this simple, you may implement this with native DOM methods, if you like:
document.querySelector('#parent').addEventListener('click', ({ target }) => {
if (!target.matches('.sday')) {
return;
}
const sheet = target.parentElement;
while (sheet.nextSibling) {
sheet.nextSibling.remove();
}
});
<div id="parent" class="parent">
<div class="room-sheet">
<div class="sday">1</div>
</div>
<div class="room-sheet">
<div class="sday">2</div>
</div>
<div class="room-sheet">
<div class="sday">3</div>
</div>
<div class="room-sheet">
<div class="sday">4</div>
</div>
</div>
Save the current number and the maximum number in variables then just iterate through them, making sure not to delete the clicked one:
$(".sday").on("click", function() {
let start = parseInt($(this).text());
let finish = parseInt($(".sday").last().text());
for (let i = start + 1; i <= finish; i++) {
$(`.sday:conatins(${i})`).remove();
}
});
I have a list of elements which have alternating classes. The occurrences of the classes are random and can occur once or many times in a row.
I am looking a way to select every first occurrence of an element (marked with a -). Preferably, I'd like to do this in CSS but I can work with a JavaScript solution as well.
<div class="type-1"></div> -
<div class="type-1"></div>
<div class="type-1"></div>
<div class="type-2"></div> -
<div class="type-1"></div> -
<div class="type-1"></div>
<div class="type-2"></div> -
<div class="type-2"></div>
<div class="type-1"></div> -
...
Just like this: https://jsfiddle.net/aq8nw21f/
This code uses the CSS adjacent sibling selector, as well as :first-of-type to get the edge case of the first item in the list.
#container > div:first-of-type, .type-1 + .type-2, .type-2 + .type-1 {
color: red;
}
<div id="container">
<span>If you used :first-child, the div below this would not highlight.</span>
<div class="type-1">Yes</div>
<div class="type-1">No</div>
<div class="type-1">No</div>
<div class="type-2">Yes</div>
<div class="type-1">Yes</div>
<div class="type-1">No</div>
<div class="type-2">Yes</div>
<div class="type-2">No</div>
<div class="type-1">Yes</div>
</div>
And a less spectacular JS solution than the CSS one of TW80000:
var els = Array.from(document.querySelectorAll('div[class^="type-"]'));
console.log(els.filter(function(el, index) {
return index === 0 || !el.classList.contains(els[index - 1].classList.item(0));
}));
<div class="type-1">1</div>
<div class="type-1">2</div>
<div class="type-1">3</div>
<div class="type-2">4</div>
<div class="type-1">5</div>
<div class="type-1">6</div>
<div class="type-2">7</div>
<div class="type-2">8</div>
<div class="type-1">9</div>
<div class="row">
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
</div>
<div class="parent">
<div class="child">child4</div>
<div class="child">child5</div>
<div class="child">child6</div>
</div>
<div class="parent">
<div class="child">child7</div>
<div class="child">child8</div>
<div class="child">child9</div>
</div>
<div class="parent">
<div class="child">child10</div>
<div class="child">child11</div>
<div class="child">child12</div>
</div>
<div class="parent">
<div class="child">child13</div>
<div class="child">child14</div>
<div class="child">child15</div>
</div>
<div class="parent">
<div class="child">child16</div>
<div class="child">child17</div>
<div class="child">child18</div>
</div>
</div>
I have sortable divs and i want to save the order of divs. But if i use jquery each function it loops parent divs and passing another parent after taking all childs of it vertically.What i am trying to do is getting child1,child4,child7,child10.. and so on. If we think this as a table i want to take values of cell row by row but jquery each doing this column by column.
The output that i want is 1,4,7,10,13,16,2,5,8,11,14,17,3,6,9,12,15,18
here is code in fiddle
Please check demo
var arr=[];
var count = $(".parent")[0].children.length;
for (var i = 0 ; i < count ; i++){
$(".parent").each(function(){
arr.push($(this.children[i]).text())
});
}
console.log(arr)
Please check this code made for you and let me know, If it's working for you or not.
var cnt = 0;
$(".parent:first-child .child").each(function () { cnt++; });
for (var i = 1; i <= cnt; i++) {
$(".parent").each(function () {
console.log($(this).children('.child:nth-child(' + i + ')').html());
});
}
HTML:
<div class="outer">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
JavaScript (fiddle):
var $first_visible = $("div.inner:visible:first");
This returns the first visible inner div, which is inner2.
However, as soon as the outer div is hidden (let's say I want to fade it in at some later time):
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
all inner divs are considered hidden and the selector does not return inner2 any more.
How would I need to modify my jQuery selector to ignore the container's visibility?
As adeneo said, once its hidden, there isnt much you can do.
However, you can check before hand, show it regardless, then hide it again if it was hidden
var wasVisible = $(".outer").is(':visible');
$(".outer").show();
var $first_visible = $("div.inner:visible:first");
if (!wasVisible) {
$(".outer").hide();
}
console.log($first_visible.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
MDN says:
When you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
Hence, whatever the HTML elements are child to the parent element will not be rendered in the HTML page.
And moreover, whatever styles that has been applied on the parent element will not be rendered in HTML page.
In order to achieve what you want and if you consider that your HTML element should be in the document tree then try using CSS visibility property. For example:
<div class="outer" style="visibility: hidden">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner" style="visibility: visible"></div>
<div id="inner3" class="inner"></div>
</div>
JS Fiddle
If I understood you correctly, you can simulate the effects of the parent being hidden using CSS like this.
HTML
<div class="outer hide">
<div id="inner1" class="inner hide">Inner 1</div>
<div id="inner2" class="inner">Inner 2</div>
<div id="inner3" class="inner">Inner 3</div>
</div>
CSS
.hide {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);
// For an SVG
fill: rgba(0,0,0,0);
stroke-opacity: 0;
}
The reason why you can't use the visibility/display/opacity property is because as #Umesh mentioned that the all descendant elements will also get their display/visibility/opacity as not visible as if the element doesn't exist in the document tree.
But using this method you set the alpha to 0 of the element and this doesn't effect the descendants unless they have inherit set for those properties.
Hope this helps.
write two classes : first one to display and last one to hide.
With that you can select all divs whoses "visible" even if parent is "hidden"
var $first_visible = $("div.inner.enable");
console.log($first_visible);
$("div#result").text($first_visible[0].id);
.disable{
display : none;
}
.enable{
display : block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer disable">
<div id="inner1" class="inner disable">1</div>
<div id="inner2" class="inner enable">2</div>
<div id="inner3" class="inner enable">3</div>
</div>
<div id="result"></div>
One option would be to show the parent element, check for the first visible element, and then hide the parent element again.
Alternatively, since the element has inline CSS, you could filter the elements based on whether the display property is set to none and then retrieve the first one in the filtered collection:
Updated Example
var $first_visible = $(".inner").filter(function () {
return this.style.display !== 'none';
}).first();
var $first_visible = $(".inner").filter(function () {
return this.style.display !== 'none';
}).first();
$("div#result").text('First visible: #' + $first_visible[0].id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none;">
<div id="inner1" class="inner" style="display: none"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
<div id="result"></div>
However, the better approach would be to check the computed style of the element using the .getComputedStyle() method. In doing so, you can determine whether the display of the element is set to none even if the element doesn't have inline CSS.
Updated Example
var $first_visible = $(".inner").filter(function () {
return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();
var $first_visible = $(".inner").filter(function () {
return window.getComputedStyle(this, null).getPropertyValue('display') !== 'none';
}).first();
$("div#result").text('First visible: #' + $first_visible[0].id);
#inner1 { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none;">
<div id="inner1" class="inner"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
<div id="result"></div>
My proposal is to use a filter function but only to select the first visible element (but this is also hidden because the parent is hidden):
var $first_visible = $('div.inner').filter(function() {
return !(this.style.visibility != '' || this.style.display != '');
}).first();
$(function () {
var $first_visible = $('div.inner').filter(function() {
return !(this.style.visibility != '' || this.style.display != '');
}).first();
$('body').append('<p>' + $first_visible.attr('id') + '</p>');
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none;"></div>
<div id="inner2" class="inner"></div>
<div id="inner3" class="inner"></div>
</div>
See here i have checked style attribute for ignore first div. And check with hidden selector for get all other div.
$(document).ready(function(){
var currElements=$('.inner[style!="display: none"]:hidden'); // Here you are get two div with id inner2 and inner3
alert(currElements[0].id); // First div
alert(currElements[1].id); // First div
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" style="display: none">
<div id="inner1" class="inner" style="display: none">Inner 1</div>
<div id="inner2" class="inner">Inner 2</div>
<div id="inner3" class="inner">Inner 3</div>
</div>
Take a flag value and loop each div.inner to get first visible element. Then check its css property.
Below is the tested code :
var isValid=true;
$("div.inner").each(function() {
if($(this).css("display") == "block" && isValid) {
$("div#result").text($(this).attr('id'));isValid=false;
}
});
For the life of me I can't figure out how to access the first div with text "I want this one" starting with the id of div1
My attempt:
$("#div1").first().first().html();
Here is an example
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
</div>
Try this
1.
$("#div1 .another:first").html();
2.
$("#div1 .another").first().html();
3.
$("#div1 .another").eq(0).html();
Example
If you literally want the first element within the first element, you can do it in one selector using pure javascript selectors for performance like so:
var row = $('#div1 > div:first-child > div:first-child');
alert(row.text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="div1">
<div class="row">
<div class="another">I want this one</div>
<div class="another">Not this one</div>
</div>
<div class="row">
<div class="another">Another one</div>
<div class="another">Yet another one</div>
</div>
</div>