EDIT
I have this working in fiddle http://jsfiddle.net/gandjyar/HM67V/ but can't get it working outside of fiddle... ideas?
I have the following code:
<div id="sort">
<p>Sort Communities By: North | South | East | West | ALL
</p>
</div>
<div class="fp-floorplans">
<div id="fp-link">
Community 1
</div>
<div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location">
<span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name">Loation:</span>
<span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value">South</span>
</div>
<div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools">
<span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name">School(s):</span>
<span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value">Southwest</span>
</div>
<div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at">
<span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name">Price Starting At:</span>
<span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value">$100's</span>
</div>
</div>
<div class="fp-floorplans">
<div id="fp-link">
Community 2
</div>
<div id="wpcf-field-location" class="wpcf-field-checkboxes wpcf-field-location">
<span class="wpcf-field-name wpcf-field-checkboxes wpcf-field-location-name">Loation:</span>
<span class="wpcf-field-value wpcf-field-checkboxes-value wpcf-field-location-value">East</span>
</div>
<div id="wpcf-field-schools" class="wpcf-field-textfield wpcf-field-schools">
<span class="wpcf-field-name wpcf-field-textfield wpcf-field-schools-name">School(s):</span>
<span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-schools-value">Southeast</span>
</div>
<div id="wpcf-field-price-starting-at" class="wpcf-field-textfield wpcf-field-price-starting-at">
<span class="wpcf-field-name wpcf-field-textfield wpcf-field-price-starting-at-name">Price Starting At:</span>
<span class="wpcf-field-value wpcf-field-textfield-value wpcf-field-price-starting-at-value">$100's</span>
</div>
</div>
and I want to be able to sort by North, South, East, West for the 'wpcf-field-location-value' or just ascending for the 'wpcf-field-schools-value'.
I've tried implementing some suggestions that I've found but none have worked. (Jquery - sort DIV's by innerHTML of children and Sorting divs by number inside div tag and jQuery)
First: you can't have same id values in your html. You can add a user attribute by giving it data-id. An id property value must be unique for the whole document.
Since North,South,East,West are not alphabetically ordered you need to replace them with another value.
Using the code provided here (with some edits): Jquery - sort DIV's by innerHTML of children
var direction={north:0,south:1,east:2,west:3}
function sortOn(primary){
primary=primary.toLowerCase();
for(item in direction){
if(direction[item]===0){
break;
}
}
var tmp=direction[primary];
direction[primary]=0;
direction[item]=tmp;
var items = $(".fp-floorplans").sort(function(a, b) {
var vA = $(a).find("wpcf-field-location-value").text().trim().toLowerCase();
var vB = $(b).find("wpcf-field-location-value").text().trim().toLowerCase();
if(directions[vA]===directions[vB]){
//secondary search
vA = $(a).find("wpcf-field-schools-value").text().trim().toLowerCase();
vB = $(b).find("wpcf-field-schools-value").text().trim().toLowerCase();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
}
// primary searh (a and b cannot be the same)
return (vA < vB) ? -1 : 1;
});
}
sortOn("west");
To change the priority of the order (like west first) you can change the directions variable before sorting:
direction={north:3,south:1,east:2,west:0}
Fist you need to see what value currently holds the 0 and then replace it with the new on.
Related
I have tried using basic JavaScript when data-reviews="2" and it worked, but what I need is when data-reviews is less than 5 or any specific number, the whole <span> section should be hidden. I need assistance on this. I am trying to achieve the same outcome but I want to hide this, when data reviews has < 5.
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
Loop over the badge elements. For each collection badge select the review element. Parse the data-reviews attribute with parseInt. Check if the review is less than 5. If so, remove the collection badge element.
const collectionListBadges = document.querySelectorAll('.collection-list-badge');
for (const collectionListBadge of collectionListBadges) {
const reviewsElement = collectionListBadge.querySelector('[data-reviews]');
const amountOfReviews = parseInt(reviewsElement.getAttribute('data-reviews'));
if (amountOfReviews < 5) {
collectionListBadge.remove();
}
}
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="4.0" data-lang="en" aria-label="Rated 4.0 out 38reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="4" data-rating="4.0" data-label="reviews" aria-label="38 reviews" data-version="2">4</span>
</div>
Is it possible to replace ngx-pagination's 'pagination-control'? By defaults, page numbers are showing like '1 2 3'. And I want to replace them with a string value in the array.
<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>
The above code will display pagination numbers like
I want to replace the number with values from an array [Anything1, Anything2, Anything3].
Here my data is fixed and I know my page number count and its details.
You need to have look at custom template of ngx-pagination. In customization part you may try to add your Anything before {{page.label}}.
Custom Template example can be found here. http://michaelbromley.github.io/ngx-pagination/#/custom-template
<pagination-template #p="paginationApi"
[id]="config.id"
(pageChange)="config.currentPage = $event">
<div class="custom-pagination">
<div class="pagination-previous" [class.disabled]="p.isFirstPage()">
<a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
</div>
<div *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
<a (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>Anything{{ page.label }}</span>
</a>
<div *ngIf="p.getCurrent() === page.value">
<span>Anything{{ page.label }}</span>
</div>
</div>
<div class="pagination-next" [class.disabled]="p.isLastPage()">
<a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
</div>
</div>
</pagination-template>
I have a series of list items in the following structure. I am trying to use Tinysort to sort the list items of the ordered list class="collection-grid editable ui-sortable". The criteria for sorting is the text in double stars below which is the text of div class collection-item-title.
<div id="collection-items" class="collection-items">
<ol class="collection-grid editable ui-sortable">
<li class="collection-item-container track_play_hilite subscriber-item initial-batch active editing">
<div class="collection-title-details">
<a href="https://sts9.bandcamp.com/album/20190907" class="item-link">
<div class="collection-item-title">
**2019.09.07 :: Red Rocks Amphitheatre :: Morrison, CO**
</div>
</a>
</div>
</li>
<li class="collection-item-container track_play_hilite subscriber-item initial-batch active editing">
<div class="collection-title-details">
<a href="https://sts9.bandcamp.com/album/20190906" class="item-link">
<div class="collection-item-title">
**2019.09.06 :: Red Rocks Amphitheatre :: Morrison, CO**
</div>
</a>
</div>
</li>
</ol>
</div>
What I have so far is the following:
tinysort('ol#collection-grid editable ui-sortable>li',{selector:'div.collection-item-title'});
This doesn't seem to work. I am open to any methods that will work an I am not limited to Tinysort.
I was able to use the below function to sort the items correctly.
function sortUsingNestedText(parent, childSelector, keySelector) {
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();
return (vA > vB) ? -1 : (vA < vB) ? 1 : 0;
});
parent.append(items);
}
sortUsingNestedText($('.collection-grid'), "li", "div.collection-item-title");
I am using angular js with multiple conditions all using the same id. Need to get text just from the condition that is true.
I just found a big bug in an app I'm about to release.
I am using angularjs/ionic vs 1 and use allot of conditions in my html.
These condition produce great results and show what I want to be shown.
However whenever I save the information it fetches the element id, which each condition has the same id, and instead of giving me the text to the visible condition, I get all of them.
I need a way to grab the id text only if it's visible. This used to work, unless this was missed during testing.
Checking the id in controller.
function JqliteIds(id) {
// var myElement = angular.element( document.querySelector( '#some-id' ) );
var p = angular.element(document.getElementById(id)).text().trim();
p = p.replace(/(\r\n|\n|\r)/gm, " ");
p = p.replace(/ +/g, ' ');
return p;
//stepTwoFormula = stepTwoFormula.replace(/(\r\n|\n|\r)/gm, " ");
//stepTwoFormula = stepTwoFormula.replace(/ +/g, ' ');
}
The html form with multiple conditions. The id is... id="stepOneFormula"
<div class="item item-text-wrap">
<div ng-if="level.light">
<div ng-show="level.stepOne.bleachAdditiveType < 0">
<p id="stepOneFormula">
Mix {{config.productTypes[level.stepOne.productType]}} with
<span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
the manufacturer suggested developer or
</span> {{level.stepOne.peroxideVolume}} volume / {{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise.
</p>
</div>
<div ng-show="level.stepOne.bleachAdditiveType > -1">
<p id="stepOneFormula">
Add approximately {{config.partsInches[level.stepOne.bleachInches]}} of
{{config.productTypes[level.stepOne.bleachAdditiveType]}} to {{config.productTypes[level.stepOne.productType]}}. Mix with
<span ng-if="level.stepOne.productType === 1 || level.stepOne.productType === 2">
the manufacturer suggested developer or
</span> {{level.stepOne.peroxideVolume}} volume / {{level.stepOne.peroxidePercentage}} percent peroxide until it is the consistency of mayonnaise.
</p>
</div>
</div>
<div ng-if="!level.light">
<p>
<!--Going Red-->
<div ng-show="level.stepOne.redRootsTonePercentOne > -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/red-rootsDbl1.html'"></div>
</div>
<!--Mixed Levels of gray-->
<div ng-show="level.stepOne.grayTonePercentFour > -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/gray-mixedDbl1.html'" data="level.stepOne"></div>
</div>
<!--Regular Levels-->
<div ng-show="level.stepOne.grayTonePercentFour === -1 && level.stepOne.redRootsTonePercentOne === -1">
<div id="stepOneFormula" ng-include="'app/formula-result/service-types/double-process/genericDbl1.html'"></div>
</div>
</p>
</div>
</div>
As soon as I posted this question I started reading on the ng-show, ng-if and changed my ng-shows to ng-if... it worked.
https://docs.angularjs.org/api/ng/directive/ngIf
Don't need to check if element is visible. Unlike ng-show, the ngIf directive removes or recreates the element. So if it isn't created it's not there so the id is irrelevant.
I am looking for a way to sort a fairly complicated html unordered list using either standard javascript or jQuery.
Please view the HTML, the order needs to be alphabetical and based on the HTML found inside the ".keywordType span value" but needs to construct the order of the top level li (with the unique keyword_xxx). I've just pasted 2 of the list items out of dozens.
<ul class="keywords">
<li id="keyword_185">
<div class="icon_keyword"></div>
<input type="hidden" class="keywordLabel" value="More opening hours">
<div class="data-wrapper">
<div class="keywordType">
<span class="oh">Payment methods</span>
</div>
<div class="keywordValue">
<span id="keyword_185" class="oh">Credit Card, PayPal</span>
</div>
</div>
<a class="edit" title="Edit keywords"></a>
<a class="delete" title="Delete keywords"></a>
</li>
<li id="keyword_192">
<div class="icon_keyword"></div>
<input type="hidden" class="keywordLabel" value="Monday to Friday: 8:30am to 6:30pm Saturday: 9pm to 6:30pm Sunday: 10 - 4pm">
<div class="data-wrapper">
<div class="keywordType">
<span class="oh">Opening Hours</span>
</div>
<div class="keywordValue">
<span id="keyword_192" class="oh">Monday to Friday: 8:30am to 6:30pm<br>Saturday: 9pm to 6:30pm<br>Sunday: 10 - 4pm</span>
</div>
</div>
<a class="edit" title="Edit keywords"></a>
<a class="delete" title="Delete keywords"></a>
</li>
</ul>
Thanks
var list = $('ul.keywords');
var listItems = $('li', list);
listItems.sort(function (a, b) {
return $(a).text() > $(b).text() ? 1 : -1;
});
list.append(listItems);
You can sort the list of elements (jQuery objects have all the methods of Array, including Array.prototype.sort).
In the comparison function simply compare the text content of the list items. Individual letters will be subsequently compared according to their position in the alphabet (Unicode table, actually). For example, k > a is true.
Finally, just re-append the items to the list.
Demo: http://jsbin.com/igesic
Take a look at this, it exactly matches your requirement.
http://james.padolsey.com/javascript/sorting-elements-with-jquery/
Does this help?
var arr;
$('.keyword span').each( function( i, el){
arr[i] = $(el).text();
});
arr.sort();
I tested it on this question page, the code below orders the list of related questions in the right hand col.
var arr;
$('.question-hyperlink').each( function( i, el){
arr[i] = $(el).text();
});
arr.sort();