Блог

Главная - Вопросы по программированию - как я могу найти ближайший диапазон?

как я могу найти ближайший диапазон?

#javascript #jquery

#javascript #jquery

Вопрос:

допустим, у меня есть общая структура html- 

 <div data-theme="a" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-a">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Select One</span>
        <span class="ui-icon ui-icon-arrow-d ui-icon-shadow">
        </span>
    </span>
    <select onchange="selectState(this,'ADDR_SHIP_STATE')" id="ADDR_SHIP_STATE" name="ADDR_SHIP_STATE"> 
        <option>Hi</option>
        <option>Hello</option>
        <option>How</option>
        <option>are</option>
        <option>you</option>
    </select>   
</div>

то, что я пытаюсь сделать, это изменить поле выбора, взять текст выбранного параметра и поместить его в диапазон (заменить select one на эти данные), имеющий имя класса ui-btn-text

ниже приведен код, для которого я пробовал so, но безуспешно 

 function selectState(id,stateId){
var selectedState = $("#" stateId " option:selected").text();
$(id).closest("ui-btn-text").text(selectedState);
}

Пожалуйста, подскажите мне, как я могу это сделать..

Ответ №1:

.closest() ref будет продвигаться вверх по DOM, но не будет опускаться, как .parents() это происходит (кстати, вы не добавили . (точку) для поиска по классу, но это, вероятно, опечатка)

Вот попытка:

 $(id).parent().find(".ui-btn-text").text(selectedState);

Комментарии:

1. Смотрите этот пример: jsfiddle.net/8HfTa/5 (кстати, ipr101 опубликовал тот же код …) — пожалуйста, также обратите внимание, что я исправил свой код при создании jsfiddle, потому что ваш ui-btn-text был на 2 уровня ниже, поэтому мне пришлось использовать find вместо children (последний перемещается только на один уровень вниз)

Ответ №2:

Попробуйте —

 function selectState(id, stateId) {
    var selectedState = $("#"   stateId   " option:selected").val();
    $(id).parents('div').find(".ui-btn-text").text(selectedState);
}

Это приведет —

  1. Найдите родительский ‘div’ элемента ‘select’
  2. Используется find для получения .ui-btn-text элемента, содержащегося в родительском div

Демонстрация — http://jsfiddle.net/H2pea/1

Ответ №3:

Использование атрибутов, таких как onchange, на самом деле не является ненавязчивым способом, если вы используете jQuery. Это лучше:

 $('#ADDR_SHIP_STATE').change(function() {
    $(this).prev().find('.ui-btn-text').text($(this).val());
});