0

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

Nexus Fred
  • 63
  • 1
  • 10

0 Answers0