Question

我在表单中有以下结构：

<div class='full'>
  <div class='half'>
    <label>Book</label>

    <select class='collection_ID'>
      <option></option>
      <option value="1">Geen leuk boek / &euro; <span>14.50</span></option>
      <option value="2">Cool boek! / &euro; <span>24.50</span></option>
    </select>
  </div>

  <div class='half'>
    <label>Find a book</label>
    <input type='text' class='invoke_search'>
  </div>
</div>

<button class='clone'>Another Book</button>

这是我的问题。我有一个输入字段

<input type='text' class='invoke_search'>

如果用户决定输入一些文字然后继续（即模糊事件），他/她想要在非常靠近它的标题下搜索一本书。

我的jQuery函数如下：

$('.invoke_search').live('blur', function()
{  
  var needle   = this.value;
  var haystack = $(this).parent().parent().find('select').children();

  search(needle, haystack);
});

它位于一个.live（）事件监听器上（或者你调用它），因为克隆按钮会创建一个复制/克隆..所以用户可以在表单中添加更多书籍，这也意味着我不能使用唯一的ID，因为用户必须在单个搜索选项而不是每个选择。

现在回答我的问题，以下部分是硬编码的：

var haystack = $(this).parent().parent().find('select').children();

所以我正在寻找一种方法来使用类似的东西：

$(this).closest('select');

好像我的表单结构如下：

<div class='full'>
  <label>Book</label>

  <select class='collection_ID'>
    <option></option>
    <option value="1">Geen leuk boek / &euro; <span>14.50</span></option>
    <option value="2">Cool boek! / &euro; <span>24.50</span></option>
  </select>

  <label>Find a book</label>
  <input type='text' class='invoke_search'>
</div>

这会使样式变得非常难，所以有没有办法以某种聪明的方式使用.closest（）或.find（）而不是'hardcoded'parent（）。parent（）。find（）？

提前致谢

Answer 1

如果总是有一个<div class="full">包装器，那么这可能会起作用：

var $select = $(this).closest('.full').find('select');

您只需要包含可以使用选择器轻松识别的<input>和<select>的内容，然后将该选择器移至closest以找到{{3}的起点}}

如何从另一个div </select>中找到某个最接近的嵌套<select>

1 个答案: