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()的值。我已经尝试了{{1}}，但我得到的只是一个空白警报..

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/

使用jQuery在层次结构中查找标记

2 个答案: