jquery - 困惑的 jQuery .prev()

Question

当我使用 $('#btn').prev().text('new string'); 单击按钮时，我成功更改了按钮值但我不知道为什么应该使用 .prev()

根据http://api.jquery.com/prev/ , .prev() 正在搜索 DOM 中每个元素的前驱元素，但不搜索现有元素。

点击任意按钮时，是否应该改变按钮1而不是按钮2？

HTML

<button value="Button 1" id="btn1">Button 1</button>
<button value="Button 2" id="btn2">Button 2</button>
<button value="Button 3" id="btn3">Button 3</button>

Javascript

$(function (e) {

    $(':button').click(function (e) {
        e.preventDefault();
        $('#btn2').prev().text('Click');
    });
})

Answer 1

这是因为您使用的是 jQuery mobile，它会更改元素的结构:

<div class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" aria-disabled="false">
    <span class="ui-btn-inner">Button 2</span>
    <button id="btn2" class="ui-btn-hidden" value="Button 2" data-disabled="false">Button 2</button>
</div>

正如您所看到的，这里的前一个元素是一个 span 元素。以下代码段通过更新 span 的 textContent 来更改先前 .ui.btn 的 visible textContent:

$('#btn2').closest('.ui-btn') // get the closest `.ui-btn` parent 
          .prev()  // get the previous element
          .find('span.ui-btn-inner') // find the span
          .text('Click');