We Keep Coding

how to get columns of selected rows using jquery

I tried with below code and getting alert of the column name but didn't get all columns of the multiple selected rows. Here is the sample code.
$('body').on('click', 'td', function() {
var selectedRows= $(this).toggleClass('selected');
var holdNames = $(this).closest("tr").find("td:eq(2)").text();
$("#holdNames").val(holdNames);
var holdsArr = [];
for ( var index=0; index<selectedRows.length;index++) {
holdsArr.push(holdNames[index]);
};
alert(holdsArr);
});

The below code will alert the 3rd <td> in each selected row
e.g. Text1,Text2,Text3
$('body').on('click', 'tr', function() {
$(this).toggleClass('selected');
var holdNames = $(this).children().eq(2).text();
$("#holdNames").val(holdNames);
var selectedRows= $('tr.selected');
var holdsArr = [];
for ( var index=0; index<selectedRows.length;index++) {
var name = selectedRows.eq(index).children().eq(2).text();
holdsArr.push(name);
};
alert(holdsArr);
});
A better approach would be
var holdsArr = [];
$(document).on('click','tr',function(){
var $tr = $(this);
$tr.toggleClass('selected');
updateHoldsArr();
alert(holdsArr);
});
function updateHoldsArr(){
var $trs = $('tr.selected'),
arr = [];
$trs.each(function(){
arr.push($(this).children().eq(2));
});
holdsArr = arr;
}

Javascript array to point variable name with similar function

I'm want to shorten this function with array
document.mySchedule.breakfast.onchange = function() {
var id = document.mySchedule.breakfast.selectedIndex;
var val = document.mySchedule.breakfast[id].value;
strUser[0]=val;
}
document.mySchedule.lunch.onchange = function() {
var id = document.mySchedule.lunch.selectedIndex;
var val = document.mySchedule.lunch[id].value;
strUser[1]=val;
}
document.mySchedule.dinner.onchange = function() {
var id = document.mySchedule.dinner.selectedIndex;
var val = document.mySchedule.dinner[id].value;
strUser[2]=val;
}
I'm try this way but it didn't seem to be work.
var selectData = ["breakfast","lunch","dinner"]
for(i = 0; i < selectData.lenght; i++) {
document.mySchedule.selectData[i].onchange = function() {
var id = document.mySchedule.selectData[i].selectedIndex;
var val = document.mySchedule.selectData[i][id].value;
strUser[i]=val;
}
}
by the way this use to control selector.
Hope someone can help. thank you

Use:
var selectData = ["breakfast","lunch","dinner"]
for(i = 0; i < selectData.lenght; i++) {
var e = document.getElementById(selectData[i]);
e.onchange = function(){
strUser[i] = e.value;
};
}

Adding checkbox selected values in multi-dimensional array

I am working on this demo. How can I add each selected row as an array into the data [] so that it looks like this:
[{"Cell phone":"BlackBerry Bold 9650","Rating":"2/5","Location":"UK"},
{"Cell phone":" Samsung Galaxy","Rating":"3/5","Location":"US"}]
Here is the code I have:
var data = [];
function myfunc(ele) {
var values = new Array();
$.each($("input[name='case[]']:checked").closest("td").siblings("td"),
function () {
values.push($(this).text());
});
alert("val---" + values.join (", "));
}
$(document).ready(function() {
$("input.case").click(myfunc);
});

check if this works,
here is the fiddle demo
var data = [];
function myfunc(ele) {
var values = [];
var keys = [];
$.each($("input[name='case[]']:checked").closest("table").find('th'),
function () {
keys.push($(this).text());
});
keys.shift(); // to remove the first key
var len = keys.length, obj={}, ctr=0;
$.each($("input[name='case[]']:checked").closest("td").siblings("td"),
function () {
obj[keys[ctr]]=$(this).text();
ctr++;
if(ctr==len){
values.push(obj);
obj={};
ctr=0;
}
});
alert("val---" + JSON.stringify(values));
}
$(document).ready(function() {
$("input.case").click(myfunc);
});

http://jsfiddle.net/ugdas2em/
Try this:
var data = {};
function myfunc(ele) {
//var values = new Array();
var k = 0;
var j = 0;
data[k] = {};
$.each($("input[name='case[]']:checked").closest("td").siblings("td"),
function () {
if(j==3)
{
k = k+1;
data[k] = {};
j = 0;
}
//values.push($(this).text());
data[k][j] = $(this).text();
j=j+1;
});
console.debug(data);
//alert("val---" + values.join (", "));
}
$(document).ready(function() {
$("input.case").click(myfunc);
});
Note: If you want then you can use [] with data variable in place of {} in my code. You need to replace at three place. Thanks.

Extracting all CSS classes and ID's in a given HTML block

I have a textarea where I paste a block of HTML code. When I hit submit, I want to extract all CSS classes and ID's from that block and throw them into an array.
So far I have the submit working as well as the regular expression, but i don't know how to filter through the whole block and extract all instances where text matches my regular expression.
index.html
<body>
<textarea id="codeInput"></textarea>
<button id="submitCode">submit</button>
<script src="functions.js"></script>
</body>
function.js
$(function() {
$('#submitCode').click(function() {
var codeInput = $('textarea#codeInput').val();
console.log(codeInput);
});
});

$('#submitCode').click(function() {
var codeInput = $('textarea#codeInput').val();
var codeHTML = $('<div>', { html: codeInput }); // Parse the input as HTML
var allIds = [];
var allClasses = [];
codeHTML.find('[id]').each(function() {
allIds.push(this.id);
});
codeHTML.find('[class]').each(function() {
allClasses = allClasses.concat(this.className.split(' '));
});
console.log("IDs: " + allIds.join(', '));
console.log("Classes: " + allClasses.join(', '));
});

Make your function.js something like this:
$(function() {
$('#submitCode').click(function() {
var codeInput = $('textarea#codeInput').val();
var $input = $(codeInput);
var attrs: {
'class': [],
'id': []
};
$input.find('*').each(function() {
attrs.class.push($(this).attr('class'));
attrs.id.push($(this).attr('id'));
});
attrs.class.push($input.attr('class'));
attrs.id.push($input.attr('id'));
});
});
That goes through each element in the input code, and removes their class and id attributes, by first going through all the children of the container element in the input, and then afterwards doing the same for the container element in the input.

Personally I like Barmar's solution the best, but this works (jsfiddle):
$('#submitCode').click(function() {
var codeInput = $('#codeInput').val();
var ids = codeInput.match(/id="(.*?)"/);
var classes = codeInput.match(/class="(.*?)"/);
var output = classes[1].split(" ");
output.push( ids[1] );
console.log(output);
});

$(function() {
$('#submitCode').click(function() {
var ids = [], classes = [];
$("[id],[class]").each(function(i, el) {
var id, c;
if (id = $(this).attr('id')) {
ids.push(id);
}
if (c = $(el).attr('class')) {
classes.push(c);
}
});
console.log(ids, classes);
});
});

<textarea id="codeInput">
<div id="hello"><div class="w"></div></div>
<div id="world"></div>
<div class="my-class"></div>
</textarea>
<button id="submitCode">submit</button>
$(function() {
$('#submitCode').click(function() {
var CSS_CLASSES = [];
var CSS_IDS = [];
var el = document.createElement( 'div' );
var text = $("#codeInput").val();
el.innerHTML = text;
var nodes = el.getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if(node.id.length > 0) {
CSS_IDS.push(node.id);
}
if(node.className.length > 0) {
CSS_CLASSES.push(node.className);
}
}
console.log(CSS_CLASSES);
console.log(CSS_IDS);
});
});
http://jsfiddle.net/zeZ93/6/

I had this very same challenge and modified the code by #Ryan to extract all (unique) classes and IDs, including when multiple classes are applied to the same element. It's very useful and works for any URL.
See http://jsfiddle.net/pixelfast/4uftwbm0/57/
Thank you.
<!-- HTML -->
<textarea id="codeInput" cols=50 rows=10></textarea>
<button id="submitCode">submit</button>
<!-- jQuery -->
var remoteURL = "https://getbootstrap.com";
function url_content(url) {
return $.get(url);
}
url_content(remoteURL).success(function(data) {
$('#codeInput').val(data);
});
$(function() {
$('#submitCode').click(function() {
var CSS_CLASSES = [];
var CSS_IDS = [];
var el = document.createElement('div');
var text = $("#codeInput").val();
el.innerHTML = text;
var nodes = el.getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
if (node.id.length > 0) {
CSS_IDS.push(node.id);
}
if (node.className.length > 0) {
var x = node.className.split(" ")
$.each(x, function(index, val) {
if (val != '') {
CSS_CLASSES.push(val);
}
});
}
}
console.log("CLASSES FOUND: ", unique(CSS_CLASSES));
console.log("IDs FOUND: ", unique(CSS_IDS));
});
});
function unique(list) {
var result = [];
$.each(list, function(i, e) {
if ($.inArray(e, result) == -1) result.push(e);
});
return result;
}

jQuery multiple parent() calls

I have this for loop that gets the id and text of parents elements:
for (var i = 1; i < parents_num; i++)
{
var prev_parent_text = jQuery(id).parent().parent().find('> .myclass').text();
var prev_parent_id = jQuery(id).parent('ul').parent('li').attr('id');
}
What I am trying to do is to increase the number of parent() by 2 in each loop:
For example,
for i = 1:
var prev_parent_text = jQuery(id).parent().parent().find('> .myclass').text();
var prev_parent_id = jQuery(id).parent('ul').parent('li').attr('id');
for i = 2:
var prev_parent_text = jQuery(id).parent().parent().parent().parent().find('> .myclass').text();
var prev_parent_id = jQuery(id).parent('ul').parent('li').parent('ul').parent('li').attr('id');
for i = 3:
var prev_parent_text = jQuery(id).parent().parent().parent().parent().parent().parent().find('> .myclass').text();
var prev_parent_id = jQuery(id).parent('ul').parent('li').parent('ul').parent('li').parent('ul').parent('li').attr('id');
and so on..
I have used the eq() function unsuccesfully:
var num = (i*2) - 2
var prev_parent_text = jQuery(id).parent().eq(num).find('> .myclass').text();
var prev_parent_id = jQuery(id).parent('ul').parent('li').eq(num).attr('id');
Thank you for any help

Keep a reference for each, and update the reference for each step:
var $id = jQuery(id);
var $li = jQuery(id);
for (var i = 1; i < parents_num; i++) {
$id = $id.parent().parent();
$li = $li.parent('ul').parent('li');
var prev_parent_text = $id.find('> .myclass').text();
var prev_parent_id = $li.attr('id');
}

You could add a custom jquery function for that, like this:
$.fn.nparent = function(n) {
var elem = $(this);
for (var i=0;i<n;i++) {
elem = elem.parent();
}
return elem;
}
And use it like:
var id = $('#element').nparents(4).attr('id');