JQuery order div by value and skip if value is zero - javascript

I've done my ordering in my code but instead of reloading the whole json result, I want a client side reorder for my divs.
My C# code for ordering is:
.OrderBy(p=> p.order == 0? int.MaxValue : p.order);
This give me result like
1
2
3
4
0
0
0
My Html schema is like
<div class="item" data-sort="0" id="5051fb7c746eed1bf05309db">
<span>Some values</span>
<span>Some values</span>
<div class="subgroups">
<div class="item" data-sort="null" id="5060de4a746eed1b44cc6e90"></div>
</div> <!-- closing subgroups -->
</div> <!-- closing main div which need to be sorted -->
<div class="item" data-sort="2" id="5051fb7c746eed1bf05309db">
<span>Some values</span>
<span>Some values</span>
<div class="subgroups">
<div class="item" data-sort="null" id="5060de4a746eed1b44cc6e90"></div>
</div> <!-- closing subgroups -->
</div> <!-- closing main div which need to be sorted -->
<div class="item" data-sort="0" id="5051fb7c746eed1bf05309db">
<span>Some values</span>
<span>Some values</span>
<div class="subgroups">
<div class="item" data-sort="null" id="5060de4a746eed1b44cc6e90"></div>
</div> <!-- closing subgroups -->
</div> <!-- closing main div which need to be sorted -->
How can I reorder these divs so that the 2nd one become first and those with 0 data will be last upon reordering.

Take a look at the jQuery plugin TinySort if you're using jQuery. Here is an example of its use:
$(".item").tsort({ attr: 'data-sort',order:'desc'});
I think if you can output 0 or -1 instead of null to the data-sort attribute it should put those items at the end.

You can also do like this:
Put all your divs inside a parent div
<div id="parentDiv">
..
</div>
Then you can sort like this
$(function(){
function sort_comp(a, b){
var k1 = parseInt($(a).attr("data-sort"),10);
if(k1 === 0) k1 = Number.MAX_VALUE;
var k2 = parseInt($(b).attr("data-sort"),10);
if(k2 === 0) k2 = Number.MAX_VALUE;
return (k1-k2);
}
var arr = $.makeArray($("#parentDiv > .item"));
arr.sort(sort_comp);
$("#parentDiv > .item").remove();
$(arr).each(function(){
$("#parentDiv").append($(this));
});
});

Related

Code to automatically insert HTML into certain points on the page?

Is there any code that I could add to the header of every page that would insert HTML at 2 or 3 points on a page (probably in the body), spread out evenly? This would be amazing for the platform that I am currently working on.
For example, maybe you wanted to embed a video using this. Ideally, I could put the code in the header, and it'd insert it 2 or 3 times in the body -- spread evenly.
Here you go: https://jsfiddle.net/westryder907/808xtyq7/
$(document).ready(function() {
$('.body > div').each(function(i, el) {
if (i % 3 === 0) {
$(this).append(" Inserted text via jQuery 2.2");
if (i > 3) {
return false;
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="body">
<div class="region1">
Region1
</div>
<div class="region2">
Region2
</div>
<div class="region3">
Region3
</div>
<div class="region4">
Region4
</div>
<div class="region5">
Region5
</div>
<div class="region6">
Region6
</div>
<div class="region7">
Region7
</div>
<div class="region8">
Region8
</div>
<div class="region9">
Region9
</div>
<div class="region10">
Region10
</div>
</div>
</div>
Why not just edit your code and manually insert content from an external file with PHP?
I think more information is needed to fully understand why you'd want to approach this with your current method. It just doesn't make much sense to me why you would want to do it like this?

create list of each siblings children

I have multiple sections with multiple sub-sections. Each section should have a list of all sub-section h3-headings within this section. Given this HTML:
<div class="allwrap">
<div class="main-section" id="m1">
<h2>Main-1-Headline</h2>
<ul class="sub-sections-list">
<!-- generate LIs of each [#main-1 > .sub-section h3 text] -->
</ul>
<div class="sub-section" id="m1-s1">
<h3>Main-1-Sub-1-Headline</h3>
</div>
<div class="sub-section" id="m1-s2">
<h3>Main-1-Sub-2-Headline</h3>
</div>
</div>
<div class="main-section" id="main-2">
<h2>Main-2-Headline</h2>
<ul class="sub-sections-list">
<!-- generate LIs of each [#main-2 > .sub-section h3 text] -->
</ul>
<div class="sub-section" id="m2-s1">
<h3>Main-2-Sub-1-Headline</h3>
</div>
<div class="sub-section" id="m2-s2">
<h3>Main-2-Sub-2-Headline</h3>
</div>
</div>
</div>
So I iterate over each sections subsection H3 and have an array of ALL h3-headings now which is not what i want to accomplish:
var myList = [];
$('.main-section .sub-section').each(function(){
myList.push($(this).find('h3').text());
});
$.each(myList, function(){
var li = $('<li/>').appendTo('.sub-sections-list');
$('<a/>').attr('href', '#').text(this).appendTo(li);
});
How can i make it so that not all h3-headings of all sections are in the list but only the headings of the respective parent section? The result should look like this:
Main-1-Headline (begin of Main-section-1)
Main-1-Sub-1-Headline
Main-1-Sub-2-Headline
Main-1-Sub-1-Headline (begin of sub-section-1)
Some content here (not in above HTML for keeping it simple)
Main-1-Sub-2-Headline (begin of sub-section-2)
Some content here (not in above HTML for keeping it simple)
Main-2-Headline (begin of Main-section-2)
Main-2-Sub-1-Headline
Main-2-Sub-2-Headline
Main-2-Sub-1-Headline (begin of sub-section-1)
Some content here (not in above HTML for keeping it simple)
Main-2-Sub-2-Headline (begin of sub-section-2)
Some content here (not in above HTML for keeping it simple)
I think you want this.
Updated short way demo
$('.main-section h3').each(function(){
$(this).parent().prevAll(".sub-sections-list").append('<li>'+$(this).text()+'</li>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="allwrap">
<div class="main-section" id="m1">
<h2>Main-1-Headline</h2>
<ul class="sub-sections-list">
<!-- generate LIs of each [#main-1 > .sub-section h3 text] -->
</ul>
<div class="sub-section" id="m1-s1">
<h3>Main-1-Sub-1-Headline</h3>
</div>
<div class="sub-section" id="m1-s2">
<h3>Main-1-Sub-2-Headline</h3>
</div>
</div>
<div class="main-section" id="main-2">
<h2>Main-2-Headline</h2>
<ul class="sub-sections-list">
<!-- generate LIs of each [#main-2 > .sub-section h3 text] -->
</ul>
<div class="sub-section" id="m2-s1">
<h3>Main-2-Sub-1-Headline</h3>
</div>
<div class="sub-section" id="m2-s2">
<h3>Main-2-Sub-2-Headline</h3>
</div>
</div>
</div>
Old way
$('.main-section').each(function() {
var myList = [];
$(this).find("h3").each(function() {
myList.push($(this).text());
});
$subSectionList = $(this).find('.sub-sections-list');
$.each(myList, function() {
var li = $('<li/>').appendTo($subSectionList);
$('<a/>').attr('href', '#').text(this).appendTo(li);
});
});
Something like this (optimized version):
$('.main-section').each(function(){
var ul = $(this).find('.sub-sections-list');
$(this).find('h3').each(function(){
ul.append('<li>'+$(this).text()+'</li>');
});
});
Example: https://jsbin.com/gefupivoji/edit?html,js,output

jquery change text to hyperlink through all Div tags

I have page say
<div class="wrapper" id="checkLink">
<div name="something">
<div name="something">
<bean:write name="" property=""/>
</div>
</div>
<div name="something">
<div name="something">
<div name="something">
<bean:write name="" property=""/>
</div>
</div>
</div>
</div>
I want to change any text within "checkLink" div to a hyperlink if it starts with a http/https/www
The data comes from the back end and is entered by the end users... There are 90 odd fields(Out of which anyone could be a hyperlink)
Only the matching values should appear as hyperlinks
How do I convert them into hyperlinks?
https://jsfiddle.net/w033ucrm/1/
var divs = $('#checkLink div');
$.each(divs, function(index, div){
var target = $(div).attr('name');
$('body').append(''+target+'<br/>');
});
you could also use $(div).replaceWith() but with nested divs you'd only get 2 anchors

how to make a div sortable?

I have a div table like for a page, is it possible to make it sortable like html table with javascript?
I moved from normal table because it was not possible for me to continue using it due to this How to add td rowspans to a table? and thus used the div table.
so I used this div table and the only thing im missing is how to make it sortable so I can sort it by item or price.. like datatables, tablesorter e.t.c
<div class="Header">
<div class="item">Item
</div>
<div class="desc">Description
</div>
<div class="price">Price
</div>
<div class="status">Status
</div>
</div>
<div class="Info">
<div class="itemName">
<div class="item">Item 1</div>
</div>
<div class="itemInfo">
<div class="List">
<div class="Desc">Description 1</div>
<div class="Box">
<div class="price">$79</div>
<div class="status">16 in stock</div>
</div>
</div>
</div>
</div>
full code here http://codepen.io/anon/pen/empqyN?editors=110 and here http://jsfiddle.net/a4fcxzra/
Here is a sorting handler: (the header classes need to be the same as where the info is, so changed in the header desc to Desc)
var sorting=1;
$(".Header div").each(function(){
$(this).click(function(){
var cl=$(this).attr("class") // get header class, this is where I get info from
sorting = sorting == 1 ? -1 : 1 ; // sorting asc or desc
$(".Info").detach().sort(function(a,b){
var str1=$(a).find('.'+cl).text(); // get text
var str2=$(b).find('.'+cl).text();
var n1 = str1.match(/\d+/)[0] //get digits in text
var n2 = str2.match(/\d+/)[0]
if(n1 != '' ){ // if its a number
return n1*sorting > n2*sorting; // sort by number
}else{ // sort by string
return sorting == 1 ? str1 > str2 : str1 < str2
}
}).appendTo($(".Header").parent());
})
})
Working Fiddle: http://jsfiddle.net/juvian/a4fcxzra/1/
You can sort an Array using JavaScript and then creating tags dynamically to place them within the column headers (which you should create in the html for better performance)

wrap more than one nodes with div

How can i wrap exactly half of the div's with another div using jquery or javascript
I have this
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
I want this
<div class="wrap">
<div class="post">1</div>
<div class="post">2</div>
<div class="post">3</div>
</div>
<div class="wrap">
<div class="post">4</div>
<div class="post">5</div>
<div class="post">6</div>
</div>
Try using this:
var posts = $('.post'),
postCount = posts.length,
postHalf = Math.round(postCount/2),
wrapHTML = '<div class="wrap"></div>';
posts.slice(0, postHalf).wrapAll(wrapHTML); // .slice(0, 3)
posts.slice(postHalf, postCount).wrapAll(wrapHTML); // .slice(3, 6)
This selects all .post, gets the number of elements found then halves that value to get the splitting point. It then uses .slice() to select a specific range of elements and .wrapAll() to wrap each selection in <div class="wrap"></div>.
Here it is working: http://jsfiddle.net/ekzrb/

Categories