Question

我想知道在Javascript或JQuery中是否存在一种方式来获取2 id之间所有元素的所有信息？所有信息我的意思是ID，名称，类型（无线电，IMG，一个href ...），类，Attr，值，......

结果将是：

Element 0:
 Type = radio
 ID = myID
 Name = myName
 Class = myClass1, myClass2
 Attr = checked
 Value = 250
 etc..

Element 1:
 ...

感谢 Pranav C Balan ，但这个问题与“使用Javascript / jQuery从HTML元素中获取所有属性”不重复此问题不回复我的问题。它只适用于一个元素。我正在寻找关于ID之间所有元素的所有信息，如此

HTML＆gt;

<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＆gt;

<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>

它适用于表外的所有元素，但不适用于表中的元素吗？

=============================================== =================

更新2016/09/16

感谢Giorgio我构建了一个解决方案的开端

// 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;
}

它不漂亮，但它正在发挥作用。

除非我有一个复选框并且我手动更改了他的状态，否则这个状态将不包括在内。

jsfiddle

上的示例

由于

最好的问候

NexusFred

Jquery /获取2 ID之间的所有信息（ID，Class，Attr ..）

0 个答案: