Develop Reference

Using data attribute to pull in JS content

So I'm not too familiar with data attributes and I wanted to see if I get can get some help from others.
I have an HTML portion as shown below:
<div class="columns is-multiline app-list"></div>
The app-list is being rendered by the following JS:
Is there a way that instead of calling app-list as a class, that I can do something like this:
<div class="columns is-multiline" data-source="application_launcher"></div>?
All help would be appreciated!

You can use the data-attribute as an selector in the querySelector(selector) method.
In your case just replace
const apps_target = document.querySelector('.app-list');
with the following line.
const apps_target = document.querySelector('[data-source="application_launcher"]');

get code between divs

Using jquery, is there a way to capture all the code between two divs?
For example; using the code below, if Show info is clicked than the code between the ws-css-table divs should be retrieved, i.e.
<div class="ws-css-table-tr"><div class="ws-css-table-td">A</div>... <div class="ws-css-table-td">D</div></div>
should be put into a text variable.
Here is a fiddle for the current code.
Thanks for any help.
<div class="ws-css-table">
<div class="ws-css-table-tr">
<div class="ws-css-table-td">A</div>
<div class="ws-css-table-td">B</div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td">C</div>
<div class="ws-css-table-td">D</div>
</div>
</div>
</br>
<div class='show_div_info'>Show info</div>
jquery
$(".show_div_info").click(function(){
alert ("info?")
});

Here's the classic javascript and a single liner technique using innerHTML:
$(".show_div_info").click(function(){
alert($('.ws-css-table')[0].innerHTML);
});
https://jsfiddle.net/vy5mok8k/3/

$(".show_div_info").click(function(){
var children = $(".ws-css-table").html();
$(".children").html(children);
});
https://jsfiddle.net/vy5mok8k/2/

Do you mean to capture the elements inside the table and do something with it later?
$(".show_div_info").click(function(){
var table = $(".ws-css-table");
// Do something
});
Do you mean to capture the literal code inside the table? Say hello to the html() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").html();
// Do something
});
Do you mean to capture the actual text inside the table? Say hello to the text() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").text();
// Do something
});
The more practical one would be the first one, since you will be able to use it to manipulate the elements inside as you need.
Second one just grabs the actual code, perhaps you need it to show off your awesome skills.
The last one will print the text, neat if you use it to parse or log what you have thus far done.
How did that help?

is there a way to execute function using an event on "Any selector in given array"?

I have a NavBar that I have made into an array of ID and would like to some how execute a function to show/hide an array of div with different IDs. But I am have a hard time on where to start. I was thinking:
$.each(array1, function(i, value) {
/*compare to array2, check if hidden, show/hide accordingly */
}
Instead of .each I need an .any or something of the sort. I can code is idea in a different way, but I am looking for the best way of doing it and I know that there is a better way than what i am thinking.

This problem sounds like it would be better handled with CSS classes. You should probably be changing your markup to make the JS easier.
Here is an example of what it sounds you might be attempting to accomplish.
http://jsfiddle.net/Gpedn/
<div id="navbar">
home
products
</div>
<div id="content">
<div id="homeDiv" class="section">home section</div>
<div id="productsDiv" class="section">products section</div>
</div>
<script>
$('.section').hide();
$('#homeDiv').show();
$('.navLink').click(function(e){
$('.section').hide();
$('#'+ this.id + 'Div').show();
});
</script>

Easiest way to get element parent

Suppose i have this structure of elements:
<div class="parent">
<div class="something1">
<div class="something2">
<div class="something3">
<div class="something4"></div>
</div>
</div>
</div>
</div>
And code like this:
$(".something4").click(function(){
//i could do it like this...
$(this).parent().parent().parent().parent().parent();
});
But that seems to be stupid, is there a better way to do this?
also i can't just say $(.parent) because there are many divs like this with class parent in my page.

Use .closest(selector). This gets the first element that matches the selector, beginning at the current element and progressing up through the DOM tree.
$('.something4').click(function() {
$(this).closest('.parent');
});

Use .closest():
$('.something4').click(function() {
$(this).closest('.parent');
});

I think you should try this
$(this).parents(".parent");
But I don't know where on the page are the other divs with this class :)

You could always use .parentNode (standard JavaScript). It's generally a bad idea to use class names that coincide with function/variable names from the library you're using (this goes for any language). Making your class names more unique is a better approach (for instance, "scparent" instead of "parent", if the name of your application was "Super Calculator" or something). This avoids conflicts such as the one you're describing.
I would caution using .closest(), simply because you may create a function like this:
function getParentElem() {
return $(this).closest('div');
}
And it would grab the parent div's in your code just fine, but if down the road you add a table for displaying data, and you run the function through a child element of the table, you will have to create another implementation that selects the table element, because that's what you now want:
<div id="tableParent">
<table id="dataTable">
<tr id="target1">
<td>Some data.</td>
</tr>
</table>
</div>
By using your function getParentElem() on the tr element, you'll end up grabbing the div with id="tableParent", rather than the actual parent, which is the table element. So, unless you've delineated your parent classes appropriately all the way through your code (which can be a pain and isn't always efficient), you may run into problems. Especially if at any point you're creating elements programmatically, or reading in data from another 3rd-party library or script.
Not saying it's not good to use .closest()... just pointing out a possible "gotcha".

i would suggest adding to the div parent an id like 'parent_1' etc. and in every son you keep the id in the rel attr
<div id="parent_1" class="parent">
<div rel="1" class="something1">
<div rel="1" class="something2">
<div rel="1" class="something3">
<div rel="1" class="something4"></div>
</div>
</div>
</div>
</div>
$(".something4").click(function(){
//i could do it like this...
$('#parent_' + $(this).attr('rel'));
});

How to make a new parent class for an element w/ jquery?

So I have something like
<div>
<!-- other stuff then-->
<button>Hey</button>
</div>
and I'd like to make that (using Javascript/JQuery)
<div>
<!-- other stuff then-->
<div class="bw">
<button>Hey</button>
</div>
</div>
Is that possible? I couldn't find anything with material on it online…but, I'm a totally JS noob, so I'm probably not using the right terminology. Thanks!

You can use .wrap() for this:
$("button").wrap("<div class='bw'></div>");
You can test it here, for wrapping multiple elements, use .wrapAll(), here's a full list of the wrapping functions.