I would like to know if exist a way in Javascript or JQuery to get all informations of all elements between 2 id ? By all informations I mean ID, Name, Type(radio, IMG, a href ...),Class, Attr, Value, ...
Result will be :
Element 0:
Type = radio
ID = myID
Name = myName
Class = myClass1, myClass2
Attr = checked
Value = 250
etc..
Element 1:
...
Thanks Pranav C Balan but this question is not a duplicate of "Get all Attributes from a HTML element with Javascript/jQuery" this one do not reply to my question. It's only for one element. I'm looking for all informations about all elements between to ID like this
HTML >
<span id="start" name="start"></span>
<input id="input_id" name="input_name" value="input_value" type="input" class="inputClass"><br>
<a id="href_id" name="href_name" href="http://stackoverflow.com" target="_blank" alt="hrefAltText">href text</a><br>
<img id="img_id" name="img_name" src="http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=8c1c8cba242e" width="100" height="100" border="0">
<table id="table_id" name="table_name" cellpadding="5" cellspacing="2" border="1" width="100%">
<tr id="tr_1_id" name="tr_1_name">
<td id="td_id" name="td_name" class="td_class">
<div id="div_id" name="div_name" class="div_class1 div_class2 div_class3">Lorem ipsum dolor sit amet</div>
<button id="button_id" name="button_name" type="button" value="button_value">myButton</button><br>
<input id="checkbox_id" name="checkbox_name" value="checkbox_value" type="checkbox" class="checkbox_Class"><br>
<input id="radio_id" name="radio_name" value="radio_value" type="radio" class="radioClass"><br>
</td>
</tr>
</table>
<span id="end" name="end"></span>
JScript >
<script>
var all_id = [];
$( '#start' ).nextUntil( '#end' ).each( function(){
if( this.id ){ all_id.push(this.id); }
});
$.each( all_id, function( key, id ) {
console.log( 'Element: '+key );
console.log( 'typeOf: '+$('#'+id).prop('nodeName') );
Array.prototype.slice.call( document.getElementById(id).attributes ).forEach( function(item) {
console.log( item.name + ': '+ item.value );
});
console.log( 'text: '+$('#'+id).text() );
console.log( ' ' );
});
</script>
It's working for all elements outside the table but not for the element inside the table ?
================================================================
UPDATE 2016/09/16
Thanks to Giorgio I build a beginning of solution
// Get all information between 2 ID
// start = first id name
// end = second id name
// carriage = return type| ex '<br>', '<p>' ...
//
// Usage between 2 id #start_id & #end_id
// var all_infos = get_all_id( '#start', '#end' );
// or
// Usage between 2 class .start_id & .end_id
// console.log( get_all_id( '.start', '.end' ) );
function get_all_id( start, end, carriage = '\n' ){
var all_id = []; // Set array to store all id
var informations = '';
// Scan all id for children
function scan_all_id( item ){
if( item.id != '' ){ // if is not a elements without id
all_id.push( item.id ); // Add a new id to array
}
// Scan all element children to find the next id
$( item ).children().each(function(n, i) {
scan_all_id( this ) // Recursion
});
};
// Scan all id between start & end
$( start ).nextUntil( end ).each( function(){
scan_all_id(this);
});
// Uppercase first letter
String.prototype.ucfirst = function(){
return this.charAt(0).toUpperCase() + this.substr(1);
}
// Print all informations about each id
$.each( all_id, function( key, id ) {
informations += 'Element N°: '+ key + carriage ;// Place of the element
informations += 'TypeOf: ' + $( '#'+id ).prop( 'nodeName' ) + carriage; // TypeOf - IMG, A - TABLE etc
// Scan all_id array
Array.prototype.slice.call( document.getElementById(id).attributes ).forEach( function( item ) {
informations += item.name.ucfirst() + ': '+ item.value + carriage ;
});
// Retrieve only text not nested in child tags
// Thanks "DotNetWala"
// URL: "http://stackoverflow.com/questions/3442394/jquery-using-text-to-retrieve-only-text-not-nested-in-child-tags"
var text =$( '#'+id )
.clone() // Clone the element
.children() // Select all the children
.remove() // Remove all the children
.end() // Again go back to selected element
.text();
informations += 'Text: '+ $.trim(text) + carriage;
informations += carriage;
});
return informations;
}
It's not pretty but it's working.
Except if I have a checkbox and I change manually his state this one will not be include as information.
Sample on jsfiddle
Thanks
Best Regards
NexusFred