如何选择兄弟元素的子元素答案

【问题标题】：How to select a child of a sibling element如何选择兄弟元素的子元素
【发布时间】：2015-01-14 01:54:18
【问题描述】：

我现在正在尝试的是有一个提交按钮来设置选择并记录分数，我想我正在努力解决如何遍历 DOM。我想我正在尝试选择兄弟姐妹的孩子。而且我不确定为什么我当前的代码不能用于此目的。

<div class='section' id='s1'>
    <div class='center' id='center1'>
        <div class='question' id='q1'>
        </div>
        <div class='choices' id='choices1'>
            <p class='a'>Choice A</p>
            <p class='b'>Choice B</p>
            <p class='c'>Choice C</p>
            <p class='d'>Choice D</p>
        </div>

        <input type='submit' value='Submit' class='submit'>
        <p class='score'></p>
    </div>
</div>

var score = 0;
$('.choices p').on('click', function() {
    $(this).closest('.choices').find('p').removeClass('selected');
    $(this).addClass('selected');
});

$('.submit').click(function() {
    var choice = $(this).prev('.choices').children().find('selected');
    if (choice.hasClass('a')) {
        score += 1;
    }
    else if (choice.hasClass('b')) {
        score += 2;
    }

    $(this).prev('.choices').find('p').off('click');
    $('.score').text('Score is ' + score);
});

【问题讨论】：

您似乎错过了“。”在find('.selected') 的选择器中。
是的，我也注意到了，但是当我更改为“.selected”时，它仍然不起作用。

标签： jquery dom css-selectors children siblings

【解决方案1】：

您有一些语法错误。试试这个吧？

http://jsfiddle.net/tallrye/bqpg1a8L/

$('.choices p').on('click', function() {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

$('.submit').click(function() {
    var score = 0;
    var choice = $('.selected');
    if (choice.hasClass('a')) {
        score += 1;
    }
    else if (choice.hasClass('b')) {
        score += 2;
    }

    $(this).prev('.choices').find('p').off('click');
    $('.score').text('Score is ' + score);
});

【讨论】：

谢谢！就像上面的答案一样，这为我指明了正确的方向。如果我可以检查两个答案，我会的。
我很高兴它有帮助。谢谢:)

【解决方案2】：

为什么不

$('.choices p').on('click', function() {
        $('.choices p.selected').removeClass('selected');
        $(this).addClass('selected');
});

$('.submit').click(function() {
        var choice = $('.choices p.selected');
        if (choice.hasClass('a')) {
            score += 1;
        }
        else if (choice.hasClass('b')) {
            score += 2;
        }

        $('.choices p').off('click');
        $('.score').text('Score is ' + score);
 });

【讨论】：

我现在就试试。不过，我唯一担心的是它是否适用于多个问题。我计划像这个一样有多个问题，所以我希望提交按钮上的点击事件分别应用于每个问题。所以每次，我只需要为用户当前的问题选择“已选择”类的 p。
您可以通过$('.choices p.selected', '#choices1')向选择器添加上下文
太棒了，这让我指出了正确的方向！谢谢！这是我的工作方式： $(this).prev('.choices).find('p.selected')

【解决方案3】：

您好，我会选择tallrye 回答，但为了避免删除您页面中所有选定的类，您可能想要使用

.siblings().removeClass("selected")

所以它只会删除 div.choices 中选择的类

<div class='choices' id='choices1'>
        <p class='a'>Choice A</p>
        <p class='b'>Choice B</p>
        <p class='c'>Choice C</p>
        <p class='d'>Choice D</p>
</div>

这里：

 $('.choices p').on('click', function() {      
   $(this).addClass('selected').siblings().removeClass("selected");
});

【讨论】：