使用jQuery根據元素類型設置內容

Question

我正在嘗試創建一個函數，該函數可以設置HTML元素的內容（值或文本），而不必擔心元素的類型。 到目前為止，我已經做出了以下決定：

function setContent(elm, value){
    if(elm.is('[value]')){                           
        elm.val(value);
    }else{                                      
        elm.text(value);
    }
}

但是這里的問題是它不適用於select元素。 下面添加了有效的代碼段，您能否帶頭？

 $(document).ready(function(){ $('#setContent').on('click', function(){ $('#setElements').children().each(function( index ) { var newContent = $('#newContent').val(); setContent($(this), newContent ); }); }); }); function setContent(elm, value){ if(elm.is('[value]')){ elm.val(value); }else{ elm.text(value); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Content: <input type="text" id="newContent" value="Two" /> <button id="setContent">Set Content</button> <hr /> Elemets to set contents: <div id="setElements"> <input type="text" value="This is a Text" /> <input type="hidden" value="This is a Hidden" /> <input type="button" value="This is a Button" /> <button>This is a Button2</button> <div>This is a DIV</div> <span>SPAN here</span> <p>Paragraph</p> <br> Not working on: <select> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> </div> 

Answer 1

<select>需要附加一個新option 。 像這樣修改setContent()

function setContent(elm, value){
        if(elm.is('select') ){
            // empty element, and then append new option
            elm.empty().append( $('<option/>', { value: value, html:value }) );
        } else if(elm.is('[value]')){                           
            elm.val(value);
        }else{                                      
            elm.text(value);
        }
}

 $(document).ready(function(){ $('#setContent').on('click', function(){ $('#setElements').children().each(function( index ) { var newContent = $('#newContent').val(); setContent($(this), newContent ); }); }); }); function setContent(elm, value){ if(elm.is('select') ){ elm.empty().append( $('<option/>', { value: value, html:value }) ); } else if(elm.is('[value]')){ elm.val(value); }else{ elm.text(value); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Content: <input type="text" id="newContent" value="Two" /> <button id="setContent">Set Content</button> <hr /> Elemets to set contents: <div id="setElements"> <input type="text" value="This is a Text" /> <input type="hidden" value="This is a Hidden" /> <input type="button" value="This is a Button" /> <button>This is a Button2</button> <div>This is a DIV</div> <span>SPAN here</span> <p>Paragraph</p> <br> Not working on: <select> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> </div> 

Answer 2

您可以在if條件下將選擇器"[value], :has([value])" .is() "[value], :has([value])"傳遞給.is()

 $(document).ready(function() { $('#setContent').on('click', function() { $('#setElements').children().each(function(index) { var newContent = $('#newContent').val(); setContent($(this), newContent); }); }); }); function setContent(elm, value) { if (elm.is("[value], :has([value])")) { elm.val(value); } else { elm.text(value); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Content: <input type="text" id="newContent" value="Two" /> <button id="setContent">Set Content</button> <hr />Elemets to set contents: <div id="setElements"> <input type="text" value="This is a Text" /> <input type="hidden" value="This is a Hidden" /> <input type="button" value="This is a Button" /> <button>This is a Button2</button> <div>This is a DIV</div> <span>SPAN here</span> <p>Paragraph</p> <br>Not working on: <select> <option value="One">One</option> <option value="Two">Two</option> <option value="Three">Three</option> </select> </div> 

Answer 3

請嘗試以下腳本

function setContent(elm, value) {
    if (elm.is('select')){
        elm.val(value);
    } else {
        if(elm.is('[value]')){                           
            elm.val(value);
        }else{                                    
            elm.text(value);
        }
    }
}

Answer 4

如下更改您的setContent函數，然后嘗試

function setContent(elm, value) {   
  var tag = elm[0].tagName;   
  if(['DIV','SPAN','BUTTON','P'].indexOf(tag) >= 0)
    elm.text(value);   
  else if(['INPUT','SELECT'].indexOf(tag) >= 0)
    elm.val(value);    
}