Simple sort DIV by name, and number - javascript

I want to sort my div using vanilla JS by name and number. Before i sorting only list, and this is not a problem, but here i have a problem how to do this.
Maybe need create object, and save all value to him, and then sorting object?
Now i trying loop or items, but i can't get item-price or item-name in 'item'
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName(){
var items = document.querySelectorAll('.item');
}
function sortingByPrice(){
var items = document.querySelectorAll('.item');
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>

Using flexbox for this could be useful cuz you can rearrange them with order, and it will save you a lot of re-rendering and moving bit's and pieces
Doe the flex layout will make it behave a little differently. So you might have to fix the css a bit.
Also the tab index might not be what you expect if you have inputs and what not.
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName() {
var items = document.querySelectorAll('.item');
// get all items as an array and call the sort method
Array.from(items).sort(function(a, b) {
// get the text content
a = a.querySelector('.item-name').innerText.toLowerCase()
b = b.querySelector('.item-name').innerText.toLowerCase()
return (a > b) - (a < b)
}).forEach(function(n, i) {
n.style.order = i
})
}
function sortingByPrice(){
var items = document.querySelectorAll('.item')
Array.from(items).sort(function(a, b) {
// using ~~ to cast the value to a number instead of a string
a = ~~a.querySelector('.item-price').innerText
b = ~~b.querySelector('.item-price').innerText
return a - b
}).forEach(function(n, i) {
n.style.order = i
})
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.items {
display: flex;
}
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>

Related

The modal close icon and the text of the modal are incorrect

<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "Kişisel Bilgiler"; } #EmployeeCardRes.PersonalInfo
</div>
<div class="modal-root-page tag-label">
<i class="close icon"></i>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="two-fields">
<div class="field ">
<div class="label">
#EmployeeCardRes.FirstName #EmployeeCardRes.LastName
<div class="text">#Model.FirstName #Model.LastName</div>
</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
</div>
</div>
Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.
I want to do like that
You will want to split out your div elements for label and text for each row, so where you have
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
You should replace it with something more like this:
<div class="field">
<div class="label">
#EmployeeCardRes.PositionCode
</div>
<div class="text">
#ViewBag.Position
</div>
</div>
You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:
.label,
.text {
display: inline-block;
font-weight: bold;
margin: 5px;
min-width: 200px;
}

Loop through two arrays - check if they belong to a div - append html to div

Hopefully I explain this well, here goes...
So the below HTML displays a basic version of my HTML - essentially I need to append the H4 inside client content to the hover-item when hovered over (The hover item currently displays but is blank with no text inside).
So I use document.QuerySelectorAll to generate a Node list and then convert to an Array, loop over the client array.
Inside I use two for loops to loop over the client content array and hover item array and check if they are contained within the client div...
If they are, I then want to append the h4 to the hover item. Each h4 will be unique as they will be people's names so it needs to append the correct one.
Here's the example code & image of the result on the project itself: results image
const hoverItem = document.querySelectorAll(".hover-item")
const hoverItemArray = Array.from(hoverItem);
const clients = document.querySelectorAll(".client");
const clientsArray = Array.from(clients);
const clientContent = document.querySelectorAll(".client-content");
const clientContentArray = Array.from(clientContent);
clientsArray.forEach(item => {
for (i = 0; i <= clientContentArray.length; i++) {
for (e = 0; e <= hoverItemArray.length; e++) {
if (item.contains(clientContentArray[i] && hoverItemArray[e])) {
hoverItem[e].append(clientContentArray[i].innerHTML);
}
}
}
})
<div class="results">
<div class="client">
<img class="client-image">
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
First: You aren't listening for the "hover"-event (in JS mouseover) and need eventlisteners for that.
If you want to append the heading from the same div like the .hover-item you don't need arrays. You just need to select the previous element and its h4 then remove it and append it to the heading. Furthermore you can loop over the collection hoverItem directly without converting it to an array.
const hoverItem = document.querySelectorAll(".hover-item");
for (i = 0; i < hoverItem.length; i++) {
hoverItem[i].addEventListener('mouseover', function() {
const client_name = this.previousElementSibling.querySelector('h4');
if (client_name) {
client_name.remove();
this.append(client_name);
}
});
}
<div class="results">
<div class="client">
<img class="client-image">
<div class="client-content">
<h4>Client Name 1</h4>
</div>
<div class="hover-item">Hover me!</div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name 2</h4>
</div>
<div class="hover-item">Hover me!</div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name 3</h4>
</div>
<div class="hover-item">Hover me!</div>
</div>
If I understand you correctly you basically want to move the h4 element from the .client-content to .hover-item when both elements are within a .client element. So in you example html it would be only for the first .client element.
You can do that with the code below. I added some commentary to the code to explain and added some css with colors to visualize what is happening.
//Loop over all client divs.
document.querySelectorAll('.client').forEach((clientDiv) => {
//Check if the div contains both .client-content and .hover-item elements.
if(clientDiv.querySelector('.client-content') && clientDiv.querySelector('.hover-item')) {
//Append the h4 to to hover item.
clientDiv.querySelector('.hover-item').append(clientDiv.querySelector('.client-content h4'));
}
});
div {
display: inline-block;
}
.hover-item {
background-color: blue;
}
.client-content {
background-color: red;
}
h4 {
margin: 10px;
background-color: yellow;
}
<div class="results">
<div class="client">
<img class="client-image">
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>
<div class="results">
<div class="client">
<img class="client-image">
</div>
<div class="client-content">
<h4>Client Name</h4>
</div>
<div class="hover-item"></div>
</div>

jQuery/Bootstrap follow div with hover item

I have a basic search result page using bootstrap and when I hover on an item RHS div should follow and slide to that specific item. Please refer to the following page to see what I'm trying to achieve. How can I achieve this using jQuery?
Example
JS Fiddle
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
You can animate the marginTop property. Note: To use the animate method you'll have to drop jquery.slim and use the full version.
Run the snippet on fullscreen, otherwise bootstrap's breakpoints kick-in.
$('.search-result').on('mouseover', function() {
// Cancel previous animation
$('.availability').stop();
// Get position of the triggered element
let newTop = $(this).offset().top + 'px';
// Animate availability box
$('.availability').animate({
marginTop: newTop
}, 800);
})
.search-result {
background-color: green;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
.availability {
background-color: red;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
$(document).ready(function(){
var positionY=0;
$('.search-result').hover(function(){
var position=$(this).position();
positionY=$(this).get(0).getBoundingClientRect().y;
/* transform: translateY(51px); */
$('.availability').css({transform:'translateY('+(positionY-15)+'px)'});
})
})
.search-result {
background-color: green;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
.availability {
background-color: red;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
position: fixed;
top: 1px;
right: 10px;
/* display:none; */
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

checking id to set value

I'm doing a jeopardy board, and I've given each div (each question square) an id in the index.html so when it's clicked, the correct question appears. I also wanted to set the point value for each div based on its id, so I used the jquery .is and this if/else statement. I've only done the code for A1 and A2, but while A2 should be worth $200, it's coming back worth $100. Why?
if ($('.well').is('#A1', '#B1', '#C1', '#D1', '#E1')) {
questionValue = 100;
}
else if ($('.well').is('#A2', '#B2', '#C2', '#D2', '#E2')) {
questionValue = 200;
}
else if ($('.well').is('#A3', '#B3', '#C3', '#D3', '#E3')) {
questionValue = 300;
}
else if ($('.well').is('#A4', '#B4', '#C4', '#D4', '#E4')) {
questionValue = 400;
}
else if ($('.well').is('#A5', '#B5', '#C5', '#D5', '#E5')) {
questionValue = 500;
}
Thank you in advance. Please let me know if I should include any more code. .well is the div class for the question squares.
Adding html code
<div id="wrapper">
<div class="row">
<div class="title"><h2></h2></div>
<div class="question">
<form> Your Answer:
<input type="text" id="answer" /></form>
<button id="submit">Submit</button>
<p id="instruct">When you're sure about your probably wrong answer, click submit</p>
<!-- <div class = "result"> </div> -->
</div>
</div>
<div class="row">
<div class="well" id="A1"> <p>$100</p> </div>
<div class="well" id="B1"> <p>$100</p> </div>
<div class="well" id="C1"> <p>$100</p> </div>
<div class="well" id="D1"> <p>$100</p> </div>
<div class="well" id="E1"> <p>$100</p> </div>
</div>
<div class="row">
<div class="well" id="A2"> <p>$200</p> </div>
<div class="well" id="B2"> <p>$200</p> </div>
<div class="well" id="C2"> <p>$200</p> </div>
<div class="well" id="D2"> <p>$200</p> </div>
<div class="well" id="E2"> <p>$200</p> </div>
</div>
<div class="row">
<div class="well" id="A3"> <p>$300</p> </div>
<div class="well" id="B3"> <p>$300</p> </div>
<div class="well" id="C3"> <p>$300</p> </div>
<div class="well" id="D3"> <p>$300</p> </div>
<div class="well" id="E3"> <p>$300</p> </div>
</div>
<div class="row">
<div class="well" id="A4"> <p>$400</p> </div>
<div class="well" id="B4"> <p>$400</p> </div>
<div class="well" id="C4"> <p>$400</p> </div>
<div class="well" id="D4"> <p>$400</p> </div>
<div class="well" id="E4"> <p>$400</p> </div>
</div>
<div class="row">
<div class="well" id="A5"><p>$500</p> </div>
<div class="well" id="B5"><p>$500</p> </div>
<div class="well" id="C5"><p>$500</p> </div>
<div class="well" id="D5"><p>$500</p> </div>
<div class="well" id="E5"><p>$500</p> </div>
</div>
<h3> score = </h3>
<div class = "score">0</div>
</div>
And this is how I'm doing each question.
$("#A1").click(function() {
$(".question").show();
$('<h4>The \"MVP\" quarterback whose team is 14-6 when he doesn’t play.</h4>').appendTo('.question');
$('#submit').click(function() {
$("#answer").on('input')
var answer = $('#answer').val(); //what does this mean in words?
if
(answer == "Tom Brady" || answer == "Brady" || answer == "brady" || answer == "tom brady") {
$('.question').replaceWith('<h3>omg you\'re so smart</h3>') //using h3 because it'll be unique, but there must be a better way
score += questionValue;
$(".score").text("$" + score);
}
else
{
$('.question').replaceWith('<h3>could NOT have been more wrong</h3>');
score -= questionValue;
$(".score").text("$" + score);
}
});
});
Whatever you have implemented so far may be correct but I guess its very difficult to maintain that code. Also for any new person t will be quite uneasy to understand that logic. Please have a look at below approach. You may refer it and take an idea out of it:
$(document).ready(function() {
$(".well").click(function() {
var quesVal = $(this).data("questionvalue"); //reading the questionvalue associated with each question
alert(quesVal);
});
});
.questionContainer {
width: 250px;
}
.questionContainer .well {
height: 40px;
width: 40px;
border: 1px solid red;
margin-left: 5px;
margin-top: 5px;
float: left;
/*Here you can also use display: inline-block instead of float:left*/
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="questionContainer">
<!--Putting question value in each and every box along with id and class as a data- attribute -->
<div class="well" id="A1" data-questionvalue="100">A1</div>
<div class="well" id="B1" data-questionvalue="100">B1</div>
<div class="well" id="C1" data-questionvalue="100">C1</div>
<div class="well" id="D1" data-questionvalue="100">D1</div>
<div class="well" id="E1" data-questionvalue="100">E1</div>
<div class="well" id="A2" data-questionvalue="200">A2</div>
<div class="well" id="B2" data-questionvalue="200">B2</div>
<div class="well" id="C2" data-questionvalue="200">C2</div>
<div class="well" id="D2" data-questionvalue="200">D2</div>
<div class="well" id="E2" data-questionvalue="200">E2</div>
</div>
You can try this way
$('.well').click(function(){
if ($(this).is('#A1')||$(this).is('#B1')||$(this).is('#C1')||$(this).is('#D1')||$(this).is('#E1')) {
alert(100);
}
else if ($(this).is('#A2') ||$(this).is('#B2')||$(this).is('#C2')||$(this).is('#D2')||$(this).is('#E2')) {
alert(200);
}
})
it may be length way but works.
Fiddle test
Simplification (this does not address your particular implementation – but simplifies it in a way that could fix your problem)
You could use classes instead of using specific IDs for each cell, and have 5 of each 1 through 5 and A through E:
<div class="row"> <!-- row 1 -->
<div class="r1 a"></div>
<div class="r1 b"></div>
<!-- blah blah -->
<div class="r5 d"></div>
<div class="r5 e"></div>
</div> <!-- row 5 -->
For reference: I use r as a first letter because you can't start a class name with a number.
Then in your JavaScript:
if($('.well').is('.r1')) questionValue = 100;
and so on.
For reference: You can skip the curlybraces {} in an if statement if the contents are one line (such as in this example).

Categories