Getting the data id - javascript

Getting the data id - javascript

I want to get all the id's of my left and right div for each rows and for the id's inside the div left, I want to store in array and arrange it to ascending order, and compare it to the id's of my left div. but I'm confuse how can I achieve on it.
Thank you in advance.
<div class="content">
<div class="row" id="row_0">
<div class="divider">
<div id="left">
<div data-id="310"><span data-id="310">Text here</span></div>
<div data-id="312"><span data-id="312">Text here</span></div>
<div data-id="320"><span data-id="320">Text here</span></div>
<div data-id="311"><span data-id="311">Text here</span></div>
</div>
</div>
<div class="divider">
<div id="right">
<div class="mixing"><span data-id="320"> Text</span></div>
<div class="mixing"><span data-id="310"> Text</span></div>
<div class="mixing"><span data-id="312"> Text</span></div>
<div class="mixing"><span data-id="311"> Text</span></div>
</div>
</div>
</div>
<div class="row" id="row_1">
<div class="divider">
<div id="left">
<div data-id="310"><span data-id="310">Text here</span></div>
<div data-id="312"><span data-id="312">Text here</span></div>
<div data-id="320"><span data-id="320">Text here</span></div>
<div data-id="311"><span data-id="311">Text here</span></div>
</div>
</div>
<div class="divider">
<div id="right">
<div class="mixing"><span data-id="320"> Text</span></div>
<div class="mixing"><span data-id="310"> Text</span></div>
<div class="mixing"><span data-id="312"> Text</span></div>
<div class="mixing"><span data-id="311"> Text</span></div>
</div>
</div>
</div>
<div class="btn-submit"><button id="go">Go</button></div>
</div>
<script>
$(function(){
$('#go').on('click',function(e){
$('div.content').each(function(index) {
// getting first all the id's of left div for row_0 , my code is not correct
var left_row_+index[] = $('#row_'+index).find('div#left').find('div').data('id');
// arrange the left_row_+index to Asc Order
// get the right id's store it to array , no need to arrange
// compare two array
if leftarray != rightarray
return false // exit loop immediately no further checking or continuing the loop if not equal. else console.log("Looks good");
});
});
});
</script>

You can use .map to get all values from left div then use .sort() to sort them . After sorting just use .each loop for right div then compare values of data-id and array finally print some messages.
Demo Code :
$(function() {
$('#go').on('click', function(e) {
//loop through left div
$('div.left').each(function(index) {
//get all values of left div
var itsort = $(this).find('span[data-id]').map(function() {
return $(this).data('id');
}).get();
itsort.sort(); //sort
console.log(itsort)
var flag = true;
//loop through right div
$(this).closest(".row").find(".right span[data-id]").each(function(index, value) {
//check if both have same at given position or not
if ($(this).data('id') != itsort[index]) {
console.log($(this).data('id'))
console.log("not good")
flag = false;
return false;
}
})
if (flag == true) {
console.log("All good..." + $(this).closest(".row").attr('id'))
}
});
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="row" id="row_0">
<div class="divider">
<div class="left">
<div data-id="310"><span data-id="310">Text here</span></div>
<div data-id="312"><span data-id="312">Text here</span></div>
<div data-id="320"><span data-id="320">Text here</span></div>
<div data-id="311"><span data-id="311">Text here</span></div>
</div>
</div>
<div class="divider">
<div class="right">
<div class="mixing"><span data-id="320"> Text</span></div>
<div class="mixing"><span data-id="310"> Text</span></div>
<div class="mixing"><span data-id="312"> Text</span></div>
<div class="mixing"><span data-id="311"> Text</span></div>
</div>
</div>
</div>
<div class="row" id="row_1">
<div class="divider">
<div class="left">
<div data-id="310"><span data-id="310">Text here</span></div>
<div data-id="312"><span data-id="312">Text here</span></div>
<div data-id="320"><span data-id="320">Text here</span></div>
<div data-id="311"><span data-id="311">Text here</span></div>
</div>
</div>
<div class="divider">
<div class="right">
<div class="mixing"><span data-id="310"> Text</span></div>
<div class="mixing"><span data-id="311"> Text</span></div>
<div class="mixing"><span data-id="312"> Text</span></div>
<div class="mixing"><span data-id="320"> Text</span></div>
</div>
</div>
</div>
<div class="btn-submit"><button id="go">Go</button></div>
</div>

Related

Match Divs by class and check if they contain a class using Js

How can I check a div by class (top) if he has an other div with an other class(bottom) inside so that the function returns a true or false in an array.
<div class="top">
<div class="bottom"></div>
</div>
<div class="top"></div>
I tried this but It only told me if the <div class="top"> contains the <div class="bottom"> and not if the <div class="top"> comes without the <div class="bottom">
if ($(".top").find(".bottom").length > 0){
}

You can exclude the ".top"-div's without ".bottom" with the has-method:
$('.top').has('.bottom').css('background', '#bada55');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
top has bottom
<div class="bottom">bottom</div>
</div>
<div class="top">top without bottom</div>

sorting elements that aren't in a HTML table using jquery

I have a set of DIVs that are displayed like a table, but aren't in an HTML table.
The structure is like this:
<div id="queryResult" style="display: block;">
<div class="rRow">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="rRow">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">39.100</div>
<div class="rCell4">26.48550</div>
</div>
<div class="clr"></div>
</div>
When displayed it looks something like this:
So what I want is to be able to sort the columns by clicking on the column header or something. I know there are jQuery/JavaScript libraries out there like sorttable but all the ones I find are expecting a HTML table.
Do I bite the bullet and just switch this over to a table, or is there another reasonable (easier) solution?

Here is a solution. I added some class to your html for more control.
HTML:
<div id="queryResult" style="display: block;">
<div class="rRow header">
<div class="rCell4">Job</div>
<div class="rCell4">Company</div>
<div class="rCell4">Customer</div>
<div class="rCell4">Product</div>
<div class="rCell4">Balance</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46549</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">VDry Transload</div>
<div class="rCell4">XYZ co</div>
<div class="rCell4">38.100</div>
<div class="rCell4">18.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46623</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">Dry Transload</div>
<div class="rCell4">MNOP co</div>
<div class="rCell4">31.100</div>
<div class="rCell4">29.48550</div>
</div>
<div class="rRow body">
<div class="rCell4 editMe">46145</div>
<div class="hideMe coID">1</div>
<div class="rCell4 coName">ADry Transload</div>
<div class="rCell4">JKH co</div>
<div class="rCell4">42.100</div>
<div class="rCell4">16.48550</div>
</div>
<div class="clr"></div>
</div>
And here is a jQuery to do sorting:
jQuery:
$('.header').children('.rCell4').each(function(index){
$(this).click(function(){
var container = $('#queryResult');
var header = $('.header');
var cmpCols = [];
$('.body').each(function(){
cmpCols.push($(this).children('.rCell4').eq(index));
});
for(i=0; i<cmpCols.length-1; i++){
for(j=i; j<cmpCols.length; j++){
if(cmpCols[i].text() > cmpCols[j].text()){
var tmp = cmpCols[i];
cmpCols[i] = cmpCols[j];
cmpCols[j] = tmp;
}
}
}
container.html(header);
for(i=0; i<cmpCols.length; i++){
container.append(cmpCols[i].parent());
}
});
});
Working jsFiddle Example.

If you gave each of your <div class="rRow"> elements a unique id, you could reorder them using jQuery .insertAfter();
e.g. for
<div class="rRow" id="row1">
...
</div>
<div class="rRow" id="row2">
...
</div>
you use $('#row1').insertAfter('#row2'); to flip the position of the two rows.
Then you just need a function which will read each value in a particular "column" in response to an onclick event on the header, get the values in that column, sort them, and reorder the rows.

How to get the id of each first element of a nexted div in JQuery

here is my HTML code
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>`
I am trying to get the id of each first element of the parent div
that is to get an
array=[computer, laptop, printer, cpu, scanner]
here is my jquery code but it's taking everything.
var a = $("div.content :nth-child(1)")find("*").toArray();
please I need some help thanks

there is a selector in jQuery which will return the first level of children: DEMO
var a=[];
$("#parent > div").each(function(){ // using > will return the first level of children
a.push($(this).attr('id'));
});
alert(a);

Those are children of the #parent element so you can iterate over that and create an array out of it using .map()
var array = $('#parent').children().map(function() {
return this.id;
}).get();
snippet.log(array)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
<div id="computer">
<div id="items">
<div id="1">hp</div>
<div id="2">compaq</div>
<div id="3">toshiba</div>
</div>
</div>
<div id="laptop">
<div id="1">i5</div>
<div id="2">dual core</div>
<div id="3">i3</div>
</div>
<div id="printer">
<div id="laser">hp laser</div>
</div>
<div id="cpu">
<div id="item">
<div id="1">pintuim</div>
<div id="2">celeron</div>
</div>
</div>
<div id="scanner">
<div id="canon">
<div>canon</div>
</div>
</div>
</div>

How to wrap all next elements until?

I have following html:
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
What I am trying to achieve, is wrap each .menuItem and all next .submenuItem with .menuSet. Unhappily, the following js wraps the whole snippet instead of the set defined above.
<div class="menuItem">Domů</div>
<div class="menuItem">O nás</div>
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
<div class="menuItem">Projekční činnost</div>
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
<div class="menuItem">Kontakty</div>
For make my intention more understandable, below I post the desired result:
$(".menuItem").nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuSet">
<div class="menuItem">Domů</div>
</div>
<div class="menuSet">
<div class="menuItem">O nás</div>
</div>
<div class="menuSet">
<div class="menuItem">Výzkum a vývoj</div>
<div class="submenuItem"><b>Aplikace aktivního gumového prášku</b>
</div>
<div class="submenuItem"><b>Odprašky</b>
</div>
<div class="submenuItem"><b>Guma</b>
</div>
<div class="submenuItem"><b>Zemědělství</b>
</div>
<div class="submenuItem"><b>Potravinářství</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Projekční činnost</div>
</div>
<div class="menuSet">
<div class="menuItem">Realizace</div>
<div class="submenuItem"><b>realizace podstránka</b>
</div>
</div>
<div class="menuSet">
<div class="menuItem">Kontakty</div>
</div>

As you are selecting all the menuItem's with class and than filtering from there, wrapAll will wrap your whole collection.
To solve this, one way would to be use $.each() and iterate through the menuItems and than wrap them.
$(".menuItem").each(function (index) {
$(this).nextUntil(".menuItem").andSelf().wrapAll("<div class='menuSet'></div>");
});
JSFiddle Demo.

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

Develop Reference

JavaScript is the programming language of the Web.

Getting the data id - javascript

Related

Match Divs by class and check if they contain a class using Js

sorting elements that aren't in a HTML table using jquery

How to get the id of each first element of a nexted div in JQuery

How to wrap all next elements until?

Sorting nested elements based on various columns

Categories

Resources