如何找到最接近的span？

Question

假设我有以下的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>  

我试图做的是在选择框改变时，取出所选选项的文本并放置到类名为ui-btn-text的中（用这个数据替换 select one）

以下是我尝试过但没有成功的代码：

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

请建议我如何做到这一点...

- Vivek

Answer 1

.closest()^ref 方法可以沿着 DOM 树向上查找，但是与.parents()方法不同，它不会向下搜索（顺便说一句，你没有添加.（点）来搜索类，但这可能是笔误）。

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

- JMax

---

请注意这个例子：jsfiddle.net/8HfTa/5（顺便说一句，ipr101发布了相同的代码...）- 还请注意，在创建jsfiddle时，我已经纠正了代码，因为你的ui-btn-text比原先低了两级，所以我必须使用find而不是children（后者只能向下遍历一级）。 - undefined

Answer 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 元素

示例 - http://jsfiddle.net/H2pea/1

- ipr101

Answer 3

如果你使用jQuery，像onchange这样的属性并不是真正的无侵入方式。这是更好的方法：

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

- dfsq