I have a drag and drop design that, when you rearrange the draggable items, pushes their ids to an array. So i’ll have an array like:
["#fake-block_1","#fake-block_3","#fake-block_2"]
Behind the scenes, I want to rearrange some corresponding divs that share the same numeric value as these blocks, e.g., #fake-block_1 maps on to #real-block_1. I can’t quite seem to grasp how I would get this rearrangement to happen. Heres what I currently have:
$('.js-fake-block’).each(function(i){
$this = $(this);
$array = new Array();
$delimiter = '_';
$array.push($this.attr("id").split($delimiter)[1]);
$array.forEach(function(item,index){
$realBlockId = "#real-block_”+[item];
});
});
So I loop through every “fake block”, split their ID by an underscore (I match fake and real with the same numeric value), add them into an array, and then have the real Ids made up again… but after that I’m lost. No idea how I’d sort the “real blocks” based on this "fake blocks" arrays order.
Here is a simple example of what you're trying to do JSFiddle
function sortDom(selectorArray) {
while (selectorArray.length) {
let $el = $(selectorArray.pop());
$el.parent().prepend($el);
}
}
//Usage//
$('.ordinal').on('click', function() {
sortDom(['#_01', '#_02', '#_03', '#_04', '#_05', '#_06', '#_07', '#_08', '#_09', '#_10']);
});
$('.reversed').on('click', function() {
sortDom(['#_10', '#_09', '#_08', '#_07', '#_06', '#_05', '#_04', '#_03', '#_02', '#_01']);
});
$('.jumbled').on('click', function() {
sortDom(['#_07', '#_01', '#_10', '#_04', '#_02', '#_03', '#_06', '#_05', '#_09', '#_08']);
});
Note this method does not enforce the array elements reference dom elements attached to the same parent and it does not enforce that all child elements of the parent must be referenced in the array. Unreferenced child elements will be pushed to the bottom of the list.
One solution is to use the sort method to describe how to the sort elements and then re-set the html of the parent:
var sortedDivs = $divs.sort(function (a, b) {
// If referring to your array of IDs, you can use indexOf($(a).attr("id"))
return $(a).attr("id") > $(b).attr("id");
});
$("#container").html(sortedDivs);
JsFiddle
I don't know why you need to save numbers in array and loop again to create a new array .. you can just use the next code
$array = []; // use array outside the loop
$('.js-fake-block').each(function(i){
var $this = $(this);
var $delimiter = '_';
var SplitNum = $this.attr("id").split($delimiter);
$array.push("#real-block_" + SplitNum[1]);
});
console.log($array);
Working example
$array = []; // use array outside the loop
$('.js-fake-block').each(function(i){
var $this = $(this);
var $delimiter = '_';
var SplitNum = $this.attr("id").split($delimiter);
$array.push("#real-block_" + SplitNum[1]);
});
console.log($array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-fake-block" id="fake-block_1"></div>
<div class="js-fake-block" id="fake-block_3"></div>
<div class="js-fake-block" id="fake-block_5"></div>
<div class="js-fake-block" id="fake-block_4"></div>
<div class="js-fake-block" id="fake-block_2"></div>
Related
I have looked at almost every question that has been asked here about htmlcollection.
So I have a div and I am fetching data and creating divs inside this div with ajax so they are not hardcoded.
this is how div look like before I fetch the data
<div id="tivvits"></div>
this is how div#tivvits looks like after I call function show_all_tivvits();
show_all_tivvits() is a function where I create a ajax request and create new divs
such as div#tivvit-21, div#tivvit-22, etc.
<div id="tivvits">
<div id="tivvit-19" class="grid-container">...</div>
<div id="tivvit-20" class="grid-container">...</div>
</div>
this is part of the js file
document.addEventListener("DOMContentLoaded", function(){
show_all_tivvits();
var t = document.getElementById('tivvits');
const j = t.getElementsByClassName("grid-container");
const k = Array.prototype.slice.call(j)
console.log(k);
for (var i = 0; i < k.length; i++) {
console.log(k[i]);
}
});
what I wanted to do in show_all_tivvits() function is I want to get the divs that are already in the div#tivvits and that way I am not gonna create them again but the problem is when I use console.log() to print out document.getElementById('tivvits').getElementsByClassName('grid-container') there are items in the htmlcollection but when I print out length it returns 0.
one more thing when I open inspect>source in chrome my index.php doesn't have updated div#tivvits.
I have tried almost every way to loop this htmlcollection but it is not working.
list of things I have tried;
Array.from(links)
Array.prototype.slice.call(links)
[].forEach.call(links, function (el) {...});
HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
HTMLCollection.prototype.forEach = Array.prototype.forEach;
It's not really clear, but are you looking for something like this?
targets = document.querySelectorAll('#tivvits > .grid-container')
for (let target of targets)
{console.log(target.id)}
This should select all <div> nodes which are direct children of the <div id="tivvits"> node and have a class attribute with the value "grid-container", and extract from them the attribute value of the id attribute.
Have a go with this
I use the spread operator to allow the use of map on the HTMLCollection
window.addEventListener("load", function() {
const gridContainers = document.querySelectorAll("#tivvits .grid-container");
const ids = [...gridContainers].map(div => div.id);
console.log(ids)
});
<div id="tivvits">
<div id="tivvit-19" class="grid-container">...</div>
<div id="tivvit-20" class="grid-container">...</div>
</div>
To just display change
const ids = [...gridContainers].map(div => div.id);
to
[...gridContainers].forEach(div => console.log(div.id));
I have HTML like
<a href="/blabla" class="matchupLink">
<span class="teams"> USA</span>
<span class="teams">Brazil</span>
</a>
I want to get the HTML of the elements with class 'teams' within class 'matchupLink'
I tried
$('.matchupLink').each(function (index, obj) {
var teams = $(this).find('.teams');
console.log(teams.html())
});
But that only returns the first instance of the .teams class within each .matchupLink class. So here it only returns USA and not Brazil.
I want to calculate how many characters both teams class have within each matchupLink class. Because then if characterCount >=20, I want to display ellipses.
What should I be doing?
Thanks
You can combine selectors with the classes
$('.matchupLink .teams')
This will return you an array of objects with the class "teams".
UPDATE
Here's a fiddle that prints to the console the length
$('.matchupLink .teams').each(function(index, item){
var $item = $(item);
var teamNameLength = $item.html().length;
console.log($item.html() + ' length is: ' + $item.html().length);
// if ($item.html().length >= 20){
// ::do logic for ellipses::
// }
});
**note the USA prints out a value of 4 because you have a space before in your example.
UPDATE 2
Fiddle alerting the length of both teams
To get the length of both teams, create a variable outside of the loop and increment it appropriately.
var lengthOfBothTeams = 0;
$('.matchupLink .teams').each(function(index, item){
lengthOfBothTeams += $(item).html().length;
});
alert('Length of both team names is: ' + lengthOfBothTeams);
console.log will work on the first match in the set in your example
you should loop over the teams and not the matches
$('.matchupLink .teams').each(function () {
console.log($(this).html())
});
html() only returns the HTML content of the first matched element in the jQuery object. Use each() to iterate over the element and display their HTML content.
$('.matchupLink .teams').each(function (index, obj) {
console.log($(this).html());
});
I currently have the following:
$(window).load(function(){
$(".boxdiv").click(function () {
$(this).toggleClass("selected");
});
});
Which perfectly does the first part of what I need. I have a fair amount of div's with the class "boxdiv" and they each have a unique ID that will identify it. What I need to happen is to have some kind of button that when pressed sends all of these div ID's with the class selected, to the next page.
Anyone got any idea of how I can do this?
Map the ID's in an array, and use $.param to create a querystring
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;});
window.location.href = '/next_page?' + $.param({ids : id_arr});
});
EDIT:
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;}),
qs = encodeURIComponent(id_arr.join(','));
window.location.href = '/next_page?ids=' + qs;
});
Perhaps this is what you're looking for:
$(".button").click(function(){
var id_arr = [];
$(".boxdiv").each(function(){ // Loop through each element with that class
id_arr.push($(this).attr('id'));
}); // Loop through each element with that class
});
window.location = 'next.html/ID=' + id_arr.join(',');
The ID's should be stored in id_arr
You can loop over each div that has the class selected. You can then use attr() to access the ID names.
Javascript
var ids = [];
$.each($(".selected"), function() {
ids.push($(this).attr('id'));
});
ids = ids.join(',');
HTML
<div id="boxA"></div>
<div id="boxB" class="selected"></div>
<div id="boxC" class="selected"></div>
<div id="boxD"></div>
This should return ["boxB", "boxC"]
See: http://jsfiddle.net/B4V28/1/
All of the answers submitted are in fact correct - but I think the real issue is your expectation of what jQuery is doing for you.
jQuery will gather all of the ID's in any manner, but you will need to have a way to collect them on the next page and actually do something with them. This will all need to happen server side.
Most likely, the ideal method, based on your comment of "potentially there could be many" you would want to do a mapping (see other answers), and pass the json object to your server, where it can pass it to the next page.
With the same code -
$('button').on('click', function() {
var id_arr = $.map($(".selected"), function(el) {return el.id;}),
qs = encodeURIComponent(id_arr.join(','));
alert('/next_page?ids=' + qs);
});
Here is a fiddle for you - http://jsfiddle.net/kellyjandrews/4dYfh/
I have this script (one of my first) which I have had a bit of help developing:
http://jsfiddle.net/spadez/AYUmk/2/
var addButton =$("#add"),
newResp = $("#resp_input"),
respTextArea = $("#responsibilities"),
respList = $("#resp");
//
function Responsibility(text){
this.text=text;
}
var responsibilities = [];
function render(){
respList.html("");
$.each(responsibilities,function(i,responsibility){
var el = renderResponsibility(responsibilities[i],function(){
responsibilities.splice(i,1);//remove the element
render();//re-render
});
respList.append(el);
});
respTextArea.text(responsibilities.map(function(elem){
return elem.text;//get the text.
}).join("\n"));
}
addButton.click(function(e){
var resp = new Responsibility(newResp.val());
responsibilities.push(resp);
render();
newResp.val("");
});
function renderResponsibility(rep,deleteClick){
var el = $("<li>");
var rem = $("<a>Remove</a>").click(deleteClick);
var cont = $("<span>").text(rep.text+" ");
return el.append(cont).append(rem);
}
Using the top box you can add responsibilities into the text area by typing them into the input box and clicking add. This works perfectly for my first box, but I need this to work for three different boxes and now I'm getting a bit stuck on how to apply this function to all three instances "responsibility, test, test2" without simply duplicating the code three times and changing the variables.
I'm sure this type of thing must come up a lot but I'm not sure if it can be avoid. Hopefully someone with more javascript experience can shed some light on this.
You can e.g. use the scoping of javascript for this:
function Responsibility(text){
/* .... */
}
function setUp(addButton, newResp, respTextArea, respList) {
var responsibilities = [];
function render(){
/* ..... */
}
addButton.click(function(e){
/* ..... */
});
function renderResponsibility(rep,deleteClick){
/* ..... */
}
}
And then for each group you can call:
setUp($("#add"), $("#resp_input"), $("#responsibilities"), $("#resp") );
You need for sure have either different id for each of this fields like #add1, #add2 ...
or you could also group each of this into e.g. a div with a class like .group1 and use class instead of id like .add , .resp_input then you even could reduce the number of parameters you need to pass to the setup to one paramter (only passing the container)
I modified your code to do exactly what you want.
Live Demo http://jsfiddle.net/AYUmk/5/
The trick is to make your responsibilities array a multidimensional array that holds an array for each item (in this case, 3 items).
var responsibilities = [new Array(),new Array(),new Array()];
Then, I updated the add buttons to have a CLASS of add instead of an ID of add. You should never have more than one element with the same ID anyway. Additionally, I added several data items to the buttons. These data items tell the jQuery which array item to use, which textbox to look for, which list to add to, and which text box to add to.
<input type="button" value="Add" class="add" data-destination='responsibilities' data-source='resp_input' data-list='resp' data-index="0">
...
<input type="button" value="Add" class="add" data-destination='test' data-source='tst_input' data-list='tst' data-index="1">
...
<input type="button" value="Add" class="add" data-destination='test2' data-source='tst2_input' data-list='tst2' data-index="2">
Then it was just a matter of changing your click() and render() functions to handle the data and multidimensional array
function render(list, textarea, index){
list.html("");
$.each(responsibilities[index],function(i,responsibility){
var el = renderResponsibility(responsibilities[index][i],function(){
responsibilities[index].splice(i,1);//remove the element
render();//re-render
});
list.append(el);
});
textarea.text(responsibilities[index].map(function(elem){
return elem.text;//get the text.
}).join("\n"));
}
$('.add').click(function(e){
var source = $('#' + $(this).data('source') ).val();
var index = parseInt($(this).data('index'));
var list = $('#' + $(this).data('list') );
var dest = $('#' + $(this).data('destination') );
var resp = new Responsibility(source);
responsibilities[index].push(resp);
render(list, dest, index);
newResp.val("");
});
NOTE: I did not get the removal working, let me know if you require assistance with that as well and I will assist once I reach my office
I would try something like this > http://jsfiddle.net/AYUmk/4/
I would access the items by class instead of ids
$(".class").find("...");
you just need to outscource responsibilities = []; and then it works perfect...
but i wont do the whole worke for you :)
I have child divs that I'm trying to sort based on a jquery .data() value that I give them that is just a single number. This code works perfectly, but only once, after that I can't figure out how the heck it's sorting them. Here is a simplified version:
var myArray = $('#container div').get();
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
$('#container').empty().append(myArray);
I've tried so many other different methods of sorting, other plugins, etc., and I can't get anything to work right. This is as close as I can get. I just have this running on a jquery change event.
Here is the whole thing in case I'm doing something stupid elsewhere:
$('#attorneyFilter').change(function() {
//get array of links for sorting
var myArray = $('#attorneyBlocks div').get();
var selectedArea = $(this).val();
//sort alphabetically when "all" is selected
if (selectedArea == 'all') {
$('#attorneyBlocks div').show();
myArray.sort(function(a,b) {
return $(a).text() > $(b).text() ? 1 : -1;
});
//filter attorneys based on practice area and then assign its order# to the div with data, getting all values from the div's class
} else {
$('#attorneyBlocks div').hide().each(function() {
var attorneyArea = $(this).attr('class').split(', ');
for (var i=0;i<attorneyArea.length;i++) {
var practiceArea = attorneyArea[i].split('-');
if (selectedArea == practiceArea[0]) {
$(this).show().data('order',practiceArea[1]);
}
}
});
//sort based on order, the lower the number the higher it shows up
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
}
//append order back in
$('#attorneyBlocks').empty().append(myArray);
});
And a link to the page in question
Here's a jsFiddle with this working using .detach() instead of .empty() to keep the data.
http://jsfiddle.net/shaneblake/Tn9u8/
Thanks for the link to the site, that made it clear.
It seems to me you never clear out the data from the prior time. You hide everything but maybe something like this will solve your problem (here I set everything hidden to the bottom, you can clear it or use a different value -- as long as it is not the same as any sort key):
$('#attorneyBlocks div').hide().data('order',999999).each(function() {
var attorneyArea = $(this).attr('class').split(', ');
for (var i=0;i<attorneyArea.length;i++) {
var practiceArea = attorneyArea[i].split('-');
if (selectedArea == practiceArea[0]) {
$(this).show().data('order',practiceArea[1]);
}
}
});
Also, the code on the server is missing the 2nd line you have above:
var myArray = $('#attorneyBlocks div').get();
The problem is the change event is tied to the original items. After the sort you make all new items. They don't have any event tied to them. You will need to use .live()
Eventually figured it out, the data values from hidden divs were screwing with my sorting, so I changed my sorting code to only pay attention to :visible divs and that did the trick. Doh! Thanks for your help everyone.