Javascript 带有变量的复杂Jquery选择器

我正在建立一个乐透网站的演示，其中一个用户看到的是一个装满了球的部分，第二个部分将填满他/她的选择

我想做的是创建一个jQuery函数，当用户单击一个球时，该函数将运行。该函数必须检索被单击的球的编号以及球的颜色（背景图像），然后将编号和背景图像设置为下一个可用球

下面是一个JSFIDLE：

这是我的jQuery函数，它存储单击的球的编号和背景，然后尝试查找打开的下一个可用球，并将该文本和背景应用于该球，但它当前不起作用。
当我单击球时，我收到以下错误：

Uncaught Error: Syntax error, unrecognized expression: [object Object] a:nth-child(1)

对于代码：

$(document).ready(function () {

    var line_counter = 1;
    var number_counter = 1;

    $('.draw-selection-wrapper.choice .draw-number').click(function (e) {
        event.preventDefault(e);

        var number = $(this).text(); ;
        var background = $(this).css('background-image');

        var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');

        var link = $(row + ' a:nth-child(' + number_counter + ')');

        link.text(number);
        link.css('background-image', background);

        number_counter = number_counter + 1;
        if (number_counter == 8) {
            line_counter = line_counter + 1;
            number_counter = 1;
        }

    });


});

这是我的HTML：

<div class="draw-numbers-outer-wrapper">
                        <div class="draw-selection-wrapper choice">
                            <div class="draw-number-row one">
                                <a href="" class="draw-number">1</a>
                                <a href="" class="draw-number">2</a>
                                <a href="" class="draw-number">3</a>
                                <a href="" class="draw-number">4</a>
                                <a href="" class="draw-number">5</a>
                                <a href="" class="draw-number">6</a>
                                <a href="" class="draw-number">7</a>
                            </div>
                            <div class="draw-number-row two">
                                <a href="" class="draw-number">8</a>
                                <a href="" class="draw-number">9</a>
                                <a href="" class="draw-number">10</a>
                                <a href="" class="draw-number">11</a>
                                <a href="" class="draw-number">12</a>
                                <a href="" class="draw-number">13</a>
                                <a href="" class="draw-number">14</a>
                            </div>
                        </div>
                        <div class="draw-selection-wrapper selections">
                            <div class="draw-number-row">
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                            </div>
                            <div class="draw-number-row">
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                            </div>
                        </div>
                    </div>

---

行

是一个jQuery对象，而不是一个字符串，因此，当您尝试将对象合并为字符串时，您将得到

[object，object]

您可以改用上下文选择器

var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');

var link = $('a:nth-child(' + number_counter + ')', row);

替换这个

var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');

借

---

明亮的非常感谢！！

var link = row.find('a:nth-child(' + number_counter + ')');

var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');

var row = '.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')';
        var link = $(row + ' a:nth-child(' + number_counter + ')');