jQuery - giriş öğesinin metin kutusu mu yoksa liste mi olduğunu belirleyin


90

JQuery'deki bir: giriş filtresi tarafından döndürülen öğenin bir metin kutusu mu yoksa seçim listesi mi olduğunu nasıl belirleyebilirim?

Her biri için farklı bir davranışa sahip olmak istiyorum (metin kutusu metin değerini döndürür, seçme hem anahtarı hem de metni döndürür)

Örnek kurulum:

<div id="InputBody">
<div class="box">
    <span id="StartDate">
        <input type="text" id="control1">
    </span>
    <span id="Result">
        <input type="text" id="control2">
    </span>
    <span id="SelectList">
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </span>
</div>
<div class="box">
    <span id="StartDate">
        <input type="text" id="control1">
    </span>
    <span id="Result">
        <input type="text" id="control2">
    </span>
    <span id="SelectList">
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </span>
</div>

ve sonra komut dosyası:

$('#InputBody')
    // find all div containers with class = "box"
    .find('.box')
    .each(function () {
        console.log("child: " + this.id);

        // find all spans within the div who have an id attribute set (represents controls we want to capture)
        $(this).find('span[id]')
        .each(function () {
            console.log("span: " + this.id);

            var ctrl = $(this).find(':input:visible:first');

            console.log(this.id + " = " + ctrl.val());
            console.log(this.id + " SelectedText = " + ctrl.find(':selected').text());

        });

Yanıtlar:


167

Bunu yapabilirsin:

if( ctrl[0].nodeName.toLowerCase() === 'input' ) {
    // it was an input
}

veya bu, daha yavaş, ancak daha kısa ve daha temiz:

if( ctrl.is('input') ) {
    // it was an input
}

Daha spesifik olmak istiyorsanız, türü test edebilirsiniz:

if( ctrl.is('input:text') ) {
    // it was an input
}

2
Çalışması için jquery sözdizimini $ (element) .is ('input') eklemek zorunda kaldım ama sonuçta harika.
Observer

28

alternatif olarak DOM özelliklerini şu şekilde alabilirsiniz: .prop

işte seçim kutusu için örnek kod

if( ctrl.prop('type') == 'select-one' ) { // for single select }

if( ctrl.prop('type') == 'select-multiple' ) { // for multi select }

metin kutusu için

  if( ctrl.prop('type') == 'text' ) { // for text box }

Bu, yeni jQuery işlevi prop () ile bir cazibe gibi çalışır. Teşekkürler.
Thomas.Benz

8

Yalnızca türü kontrol etmek istiyorsanız, jQuery'nin .is () işlevini kullanabilirsiniz,

Benim durumumda olduğu gibi aşağıda kullandım

if($("#id").is("select")) {
 alert('Select'); 
else if($("#id").is("input")) {
 alert("input");
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.