Counting all Item class elements before and after header classes - javascript

Hey I am thinking of a Jquery solution to a problem. Below you can see I have items that follow after each heading now this is fine.
<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
But there are times when there will be no items. Just headers:
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="item"></div>
In this case I would like to check if there are any items after each header. If there is none add paragraph text "Not Available" Like so:
<div class="header"></div>
<p>Not Available</p>
<div class="header"></div>
<p>Not Available</p>
<div class="header"></div>
<div class="item"></div>
Many Thanks for any help.


See if this works :
$('.header').filter(function(){
return $(this).next().hasClass('header');
// or return !$(this).next().hasClass('item');
}).after('<p>Not Available</p>')


This is my idea for you:
- You can add a class name groups to include the header class and the items class, like this:
<div class="groups">
<div class="header"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="groups">
....
</div>
....
Now you have a lot of groups. What you have to do is count every group and check if item exist or not:
$('.groups').each(function(){
if($(this).children('items').length > 0){
// found items class
}
else{
// not found any items class
$(this).append('<p>Not Available</p>');
}
});

Related

how to get a class name inside the Ext.select('.classname') and remove one of the divs from within-EXTJS

I am trying to check if a class exists inside this parent class:
var index = 1;
Ext.select(".test").elements[index];
here is the o/p from above:
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="remove-child"></div>
</div>
</div>
now im trying to find which of the divs with class="div3" does not have a child with class="hidden" and I want to remove that div with class="remove-child" and replace it with another div, say <div class="new-child"></div>, so that o/p would be:
<div class="parent">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3">
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="hidden"></div>
<div class="new-child"></div>
</div>
</div>
is this possible? Thanks!

Use a not selector to match the child(ren) and replace:
Ext.select('.div3 > :not(.hidden)').replaceWith({
cls: 'new-child',
html: 'New'
});
Fiddle.

Get index of element among siblings ignoring sibling with specific child

I have a specific use case I can't seem to find an answer to. Given the DOM elements below:
<div class="wrapper">
<div class="item"></div>
<div class="item">
<div class="foo"></div>
</div>
<div class="item">
<div class="bar"></div>
</div>
<div class="item"></div>
<div class="item selected"></div>
<div class="item"></div>
</div>
I need to find the index of the .selected element in regard to it's siblings. But I need to ignore any siblings that have the .foo child element (it will only ever be the direct child).
So typically to find the index of .item .selected you could use $(".item.selected").index() which gives 4, but since one item before it has a .foo child the correct answer is 3.
I thought, the best way to go about it was to grab all the siblings before the selected element (since siblings after it wouldn't shift it's index) and then count how many have a .foo child, and subtract that number from the selected index, so 4-1=3. I tried to do that like this:
var selectedIndex = $(".item.selected").index();
var fooCount = $(".item.selected").prevAll('.item > .foo').length;
var finalIndex = selectedIndex - fooCount;
The problem is, fooCount is coming up 0 instead of 3.

You can simply use .filter() and remove the preceding elements that have a given child.
const selected = $('.selected');
const foos = selected.prevAll().filter(function() {
return !($(this).find('.foo').length);
});
console.log(selected.index(), foos.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item"></div>
<div class="item">
<div class="foo"></div>
</div>
<div class="item">
<div class="bar"></div>
</div>
<div class="item"></div>
<div class="item selected"></div>
<div class="item"></div>
</div>

Use this selector ".item:not(:has(.foo))" and then loop to find the specific index.
var index = $(".item:not(:has(.foo))")
.toArray()
.findIndex(function(item) {
return $(item).hasClass('selected');
});
console.log(index);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item"></div>
<div class="item">
<div class="foo"></div>
</div>
<div class="item">
<div class="bar"></div>
</div>
<div class="item"></div>
<div class="item selected"></div>
<div class="item"></div>
</div>

You were close.
Change:
var fooCount = $(".item.selected").prevAll('.item > .foo').length;
… to:
var fooCount = $(".item.selected").prevAll('.item:has(.foo)').length;
Otherwise, you're looking for a sibling with class .foo, when you actually want a sibling that has a child with class .foo.
Snippet:
var selectedIndex = $(".item.selected").index();
var fooCount = $(".item.selected").prevAll('.item:has(.foo)').length;
var finalIndex = selectedIndex - fooCount;
console.log(finalIndex);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item"></div>
<div class="item">
<div class="foo"></div>
</div>
<div class="item">
<div class="bar"></div>
</div>
<div class="item"></div>
<div class="item selected"></div>
<div class="item"></div>
</div>

You can combine:
:not(): selects all elements that do not match the given selector.
:has(): reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
:index(element): where element is the DOM element or first element within the jQuery object to look for.
Hence, you can change your code:
var selectedIndex = $(".item.selected").index();
to:
var selectedIndex = $('.item:not(:has(.foo))').index($('.item.selected'));
var selectedIndex = $('.item:not(:has(.foo))').index($('.item.selected'));
console.log(selectedIndex );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item"></div>
<div class="item">
<div class="foo"></div>
</div>
<div class="item">
<div class="bar"></div>
</div>
<div class="item"></div>
<div class="item selected"></div>
<div class="item"></div>
</div>

jquery select div index

let's assume I have the following divs
<div class="category"></div>
<div class="item"></div>
<div class="item"></div>
<div class="category"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="category"></div>
<div class="item"></div>
I would like to access a specific div with class "category".
I know I can use this to get the first:
$(".category").first()
But what if I want to get the 2nd or the 3rd? etc..?

You can use eq() to select an element using index.
Reduce the set of matched elements to the one at the specified index.
$('.category').eq(2) // 3rd element
Note: The index starts from zero.
Demo
$('.category').eq(2).css('background', 'green');
.category {
background: red;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="category">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="category">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
<div class="category">I</div>
<div class="item">J</div>

How to .Clone div without cloning the wrapper

How to clone the content of a div without copying the div itself with it?
I use this function, but it copies div-1 inside div-2.
$(function(){
var $div = $('.div-1').clone();
$('.div-2').html($div);
});
HTML:
<div class="div-1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="div-2">
</div>
<div class="div-2">
</div>
GOAL:
<div class="div-1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="div-2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="div-2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

You can clone the children elements using:
$(function(){
var $div = $(".div-1").children().clone(true,true);
$('.div-2').html($div);
});
Working Demo

You need to clone he children
$(function(){
var $div = $('.div-1').children().clone();
$('.div-2').html($div);
});

$('.div-2').html($('.div-1').html());
Try this it will work

Sorting nested elements based on various columns

I'm not sure if this is possible. I can't seem to even get started but I have the following HTML. Is it possible to click on a title (Column 1, Column 2 or Column 3) and have everything in the bodyModule get sorted?
<div class="moduleRowTitle">
<div class="column1">Column 1</div>
<div class="column2">Column 2</div>
<div class="column3">Column 3</div>
</div>
<div class="bodyModule">
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>
</div>
Clicking on column2 should sort as the following:
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">AAAAA</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">AAAAA</div>
<div class="column2">BBBBB</div>
<div class="column3">CCCCC</div>
</div>
<div class="row">
<div class="column1">BBBBB</div>
<div class="column2">CCCCC</div>
<div class="column3">AAAAA</div>
</div>

Demo FIDDLE
Jquery
$(document).ready(function(){
$('.moduleRowTitle div').click(function(){
var vals = [];
var className=$(this).attr('class');
$( ".bodyModule ."+className).each(function(){
vals.push($(this).html());
});
vals.sort();
var i=0;
$( ".bodyModule ."+className).each(function(){
$(this).html(vals[i]);
i=i+1;
});
});
});
I hope this is what you expect

Categories

Resources