jQuery-查找下一个选择元素。

Question

我尝试的是在一个下拉列表中添加数据。我正在使用以下代码，当用户从一个下拉菜单中选择一个SubjectCategory时，应该填充下一个选择元素的html。处理程序本身工作正常，它返回了我需要放置在选择元素中的正确html。

还要记住，我最终会克隆这两个选择元素，并需要相应地填充它们。

问题在于$ elem始终返回null。

我猜测问题出在下面这行代码上，但不确定（请记住，我也在克隆这两个选择元素）：

var $elem = $this.closest('div').prev().find('select');

$(".SubjectCategory").live("click", function () {
    var $this = $(this);
    var $elem = $this.closest('div').next().find('select');
    var a = $this.val();

    $.get("/userControls/BookSubjectHandler.ashx?category=" + a, {}, function (data) {
        $elem.html(data);
    });
});

<div class="singleField subjectField">
  <label id="Category" class="fieldSml">Subject Matter</label>
  <div class="bookDetails ddl"><select id="ddlSubjectMatter" class="fieldSml SubjectCategory"></select></div>

  <label id="Subjects" class="fieldSml">Category</label> 
  <div class="bookDetails ddl" id="subjectMatter"><select id="ddlSubjects" class="fieldSml Subjects"></select></div>
</div>

- fulvio

---

恭喜！那绝对是一些代码，现在的问题是什么？ - Alastair Pitts

@AlastairPitts：嗯，$elem 总是返回 null？ - fulvio

优秀的编辑。只要记住，如果从未被问到问题，回答问题就会非常困难。 - Alastair Pitts

@AlastairPitts：收到。你是不是想说“问题”而不是“问题”？ :) - fulvio

可能吧。如果我冒犯了您，我很抱歉，但我对发布的许多实际上并没有提出任何问题的问题感到沮丧。 - Alastair Pitts

Answer 1

你正在搜索<label>内部，而不是下一个<div>，正如你想要的那样。next只获取当前元素之后的一个元素。

尝试这样做：它会查找与您的父元素相邻的第一个

元素。

var $elem = $this.closest('div').nextAll('div').first().find('select');

- Digital Plane

Answer 2

假设源元素的id为ddlSubjectMatter，目标选择元素的id为subjectMatter，那么将第二个id的首字母大写（即使SubjectMatter）可能会更简单，然后可以通过以下方式获取第二个元素：

var elem = document.getElementById(this.id.replace(/^ddl/,''));

这使得元素关系独立于文档布局。

顺便提一下，没有选项的选择元素是无效的HTML，虽然这不是一个大问题。

- RobG

Answer 3

为什么要创建一个多余的$this变量？除非您省略了需要不同作用域的代码，否则只需调用$(this)。这也可能导致问题。

- user685018

---

不，$this正在缓存$(this)，这很好，因为它使用了两次。 - Greg Pettit

啊这样。从快速搜索来看，它似乎是可以的。每天都会有新的收获啊！ - user685018

不幸的是，问题并不是 $this。 - fulvio

每次使用 $(this) 都会强制 jQuery 对该元素进行查找。 $this 允许您仅需一次访问 DOM 即可进行查找。一个越来越流行的约定是在 this 前面加上 $，以便以后知道它实际上是一个 jQuery 对象，并且可以像这样对其进行操作。 - Brombomb