JQuery auto detect, если мне нужно использовать .html() или .val()

Я пишу плагин jquery для создания вызовов ajax, предназначенных для моего приложения.

Внутри этого плагина мой вызов ajax выглядит так (сведенный к тому, что нужно):

    $.ajax({
        url: route,
        type: "post",
        data: inputData,
        success: function(response, textStatus, jqXHR) {
            if (outputSelector !== undefined) {

                $(outputSelector).html(response);
                // or
                $(outputSelector).val(response);

            }
        }
    });

outputSelector - это селектор, определенный вне плагина. Я не знаю, является ли этот селектор <div> или <input> или даже <select>. Есть ли разумный способ узнать, нужно ли мне использовать val() или html()?

Ответ 1

Возможно, мы можем проверить, имеет ли элемент свойство value:

var el = $(outputSelector);
if (el[0].value !== undefined) {
    el.val(response);
} else {
    el.html(response);
}

Итак, несколько похожее на однолинейное универсальное решение может быть:

$(outputSelector).each(function() {
    this[this.value !== undefined ? "value" : "innerHTML"] = response;
});

Ответ 2

Если outputSelector - это селектор классов, а элементы - смешанные типы, вам нужно использовать .each. Хотя это нехорошо смешивать div и input с тем же классом, но если вы создаете плагин, вам нужно рассмотреть такой случай.

$(outputSelector).each(function() {
    if ('value' in this) {
        $(this).val(response);
    } else {
        $(this).html(response);
    }
});

Ответ 3

Вы можете использовать метод .is(..), чтобы определить, какой метод использовать.

$.ajax({
    url: route,
    type: "post",
    data: inputData,
    success: function(response, textStatus, jqXHR) {
        if (outputSelector !== undefined) {
            var $output = $(outputSelector),
                method = $output.is('input,select,textarea') ? 'val' : 'html';

            $output[method](response);
        }
    }
});

Ответ 4

Вы также можете использовать метод . prop(), чтобы определить, определено ли свойство для данного селектора:

if ($(outputSelector).prop("value") !== undefined)
  $(outputSelector).val(response);
else
  $(outputSelector).html(response);

ПРИМЕР

В качестве альтернативы вы могли бы . hasOwnProperty()

Ответ 5

Внутри вашей функции успеха поставьте:

if (outputSelector !== undefined) {
    if(outputSelector.is("input"))
    {
        outputSelector.val(response);
    } 
    else if (outputSelector.is("div"))
    {
        outputSelector.html(response);
    }
}

было бы лучше синтаксис использовать оператор switch, но если вы предполагаете, что для val() будет использоваться только вход, а все остальное - html(), то просто замените последний else if на else и удалите условный.