We Keep Coding

How do I get an array of divs with a specific class?

So I've been working on this web-project that demands a gallery with a slider underneath it. I've used this JavaScript so far to solve the problem in a forEach(element) function:
var divnumber = Array.from(element.parentNode.children).indexOf(element);
So the pagination changes by the index of the clicked element.
But since I need to make it responsive and the graphic designer demands something different in the mobile view I would need to get the number of the divs by using their class. Basically - the same array but different values.
Is there any way to tweak that line of code a bit to let it get the index of the element by its class instead of their parent? Here's the pen for more: https://codepen.io/ridonibishi/pen/BaNyBva
Thank you in advance!

Try using:
var divnumber = Array.from(document.getElementsByClassName('class')).indexOf(element);
It works as intended.

How to remove() and undo remove() on page width conditional ? I don't need a hide or toggle

I'm using select2 which takes in rails instance variables. Due to the design layout, I can't just scale down the original select2 input. I have to create another.
The problem: A rails partial including the logic for the select2 interferes with the logic I need for the mobile select2 feature. So, it needs to not exist, not simply to be hidden (display: none) , etc..
I was able to get the mobile to work by using remove() on the original partial, but how can I get it back. Maybe something with a page-width conditional, but I'm not sure how that would work.
this is the element / render I neeed to have removed then to have it 'un-removed': (haml markup)
.divider-row
.row-border.vOne
#vCompare
= render 'compare', :categories => #categories, :v_friends => #v_friends
my JS:
if (screen.width < 760){
$('#vCompare').remove();
}
how would I get this information back, when the screen size was over 760? append?
Im trying to use detach and appendTo() as some have suggested below:
$('.compare-searchM').on('change', function () {
$('#vCompare').detach();
})
$(window).resize(function() {
$('#vCompare').appendTo($('#vAppend'));
sizing();
});
haml / markup :
.row-border
#vAppend
#vCompare
= render 'compare', :categories => #categories,
the detach is working, but I must not be understanding something with appendto()

Instead of using .remove() you can use .detach() and store the jquery object in some other variable, like
$vCompare = $('#vCompare').detach();
in your media queries, Later you can use this depending upon your media queries. for more info look .detach() | jQuery. hope this would help you.

When you add the item to the page, try storing it as a variable first and then adding it from there, somewhat like this:
var vCompare = $("<div/>",{id:"vCompare"});
vCompare.appendTo("body");
The div object will be stored in the variable vCompare, so you can still remove it with .remove();:
$('#vCompare').remove();
And then add it back later with the .appendTo(); line seen in the first code snippet.
Hope this helps!

Yes, you should use append here. But before you should get proper position from where you removing the element. You can do it via .index()
So, when you want to restore removed element, use .before() on the found by index element.
If lists, or whatever, have a big difference between mobile and desktop, I'd prefer to create two lists, one of which is shown for mobile and another for desktop.

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!

Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

jQuery select elements deep in the structure are not found

I am trying to select elements in jQuery like this:
$("input[id*='FirstName']") , but it's not working, it's not bringing the values I want from the page.
The input is located nested deeply inside the DOM, like the child #30 from the root, and I think jQuery is not able to find it.
Anyone faced an issue like this before??
Update: http://pastebin.com/es0Z1P1a

Your code is ok:
var e = $("input[id*='dtpToDate']");
console.log(e.val()); // returns 12/10/2014
http://jsfiddle.net/jojc5rvw/1/

You are using .NET and it's cludgy rendering system. If you want to select .NET controls you need to write code to render the ClientID in javascript:
var $datePicker = $("#<%= MyDatePickerControl.ClientID %>");
In the code you pasted, there is nothing with the text FirstName in there, so you are not going to get any results with the selector $("input[id*='FirstName']").
If you are trying to get all of the dtpToDate controls, you could try something like this:
var $datePicker = $("input[id$='dtpToDate']");
That selects anything that has an ID that ends with dtpToDate.

check if jquery ui accordion exists?

is there an easy way to tell if a jquery accordion exists on the page...i am trying to dynamically build accordion based on selection that runs through $ajax, reads values from xml, and depending on the xml file selected builds strings the make up the accordion, and finally appends it.
I think that if the accordion already exists on the page, and the user selects another file, I am having trouble destroying the accordion, clearing the html, append the new string, then creating a new accordion...
like
$("#accordion").accordion('destory').html('').append(string).accordion();
seems like if there is not already an accordion this idea breaks....thinking maybe i can just check?? thanks for any help to beginner!

I suspect that you could try checking .data().
var isAccordion = !!$("#accordion").data("ui-accordion");
Or, by checking the ui-accordion classname using .hasClass() which is added upon initialization.
var isAccordion = $("#accordion").hasClass("ui-accordion");

You could try with .length
Count the element using .length
Or something like this
if($('#accordion').length > 0) {
// do something
}