找到一個標籤一路使用jQuery

Question

考慮下面的HTML層次：

<dt><span class="q-num">1</span>. What is one plus one?</dt> 

<dd><input type="radio" value="a" name="1" required /> 4</dd> 
<dd><input type="radio" value="b" name="1" required /> 7</dd> 
<dd><input type="radio" value="c" name="1" required /> 2</dd> 
<dd><input type="radio" value="d" name="1" required /> 8</dd> 

<dt><span class="q-num">2</span>. What is two plus two?</dt> 

<dd><input type="radio" value="a" name="2" required /> 4</dd> 
<dd><input type="radio" value="b" name="2" required /> 7</dd> 
<dd><input type="radio" value="c" name="2" required /> 2</dd> 
<dd><input type="radio" value="d" name="2" required /> 8</dd> 

<dt><span class="q-num">3</span>. What is three plus three?</dt> 

<dd><input type="radio" value="a" name="3" required /> 4</dd> 
<dd><input type="radio" value="b" name="3" required /> 7</dd> 
<dd><input type="radio" value="c" name="3" required /> 2</dd> 
<dd><input type="radio" value="d" name="3" required /> 6</dd> 

我想點擊任何input[type='radio']時alert()最近以前span[class='q-num']的價值。我試過closest()但我得到的是一個空白警報..

Answer 1

prevUntil是你的朋友：

$(this).parent().prevUntil('dt').last().prev().find('span[class="q-num"]').text(); 

這裏的小提琴：http://jsfiddle.net/UPRBT/

---

如果您發佈的標記纔是你真正的代碼，你可以使用點擊單選按鈕的name屬性：

$('input[type="radio"]').click(function() { 
    alert(this.name); 
}); 

這裏的小提琴：http://jsfiddle.net/b4Sj8/

---

更有效的方式是使用this custom traversal method：

$.each({ 
    'prevFind' : 'previousSibling', 
    'nextFind' : 'nextSibling' 
}, function(method, dir) { 

    $.fn[method] = function (selector) { 

     var elems = []; 

     this.each(function(i, item) { 
      while (item = item[dir]) { 
       if (item.nodeType == 1) { 
        if ($.find.matches(selector, [item]).length) { 
         elems.push(item); 
         break; 
        } 
       } 
      } 
     }); 

     return this.pushStack(elems, method, selector); 
    }; 
}); 

然後你就可以使用這樣的：

$(this.parentNode).prevFind('dt').find('.q-num').text() 

這裏的小提琴： http://jsfiddle.net/b4Sj8/1/

Answer 2

嘗試

alert($(this).parent().prevAll('dt:first').find('span[class="q-num"]').text()); 

http://jsfiddle.net/mowglisanu/PkMGN/