我怎样才能找到最接近的跨度?

时间:2011-10-15 11:27:15

标签: 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>  

我要做的是更改选择框,获取所选选项的文本并将其放在span(使用此数据替换select one)中,其类名为ui-btn-text

下面是我为了没有运气而尝试过的代码

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

请建议我怎么做...

3 个答案:

答案 0 :(得分:5)

.closest() ref会提升DOM,但不会像.parents()一样下降(顺便说一下,你没有添加.(点)类搜索,但这可能是一个错字)

这是一个尝试:

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

答案 1 :(得分:2)

尝试 -

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

这将 -

  1. 找到'select'元素的父'div'
  2. 使用find获取父div中包含的.ui-btn-text元素
  3. 演示 - http://jsfiddle.net/H2pea/1

答案 2 :(得分:1)

如果使用jQuery,使用像onchange这样的属性并不是真正不引人注目的方式。这样更好:

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