使用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);    
}