jquery - 使用 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>

单击任何时，我想要alert()最近的前一个值。我试过了，但我得到的只是一个空白警报..span[class='q-num']input[type='radio']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/

---

一种更有效的方法是使用这种自定义遍历方法：

$.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/