Javascript jQuery按ID查找上一个按钮（将有不同的名称）

嘿，我正在尝试获取“上一个”按钮，以便在有人从选择框中选择值后，我可以将其文本更改为其他内容

<div class="input-group">
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span id="search_concept">Type</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="dd1" role="menu">
             <li><a href="#" data-info="blah1">For Sale</a></li>
             <li><a href="#" data-info="blah1">Wanted</a></li>
        </ul>
    </div>
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span id="search_concept">Location</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" id="dd2" role="menu">
             <li><a href="#" data-info="somewhere">Somewhere</a></li>
             <li><a href="#" data-info="elsewhere">Elsewhere</a></li>
        </ul>
    </div>
    <input type="text" class="form-control" name="x" placeholder="Search term...">
</div>

$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).data("info");

    $(this).prev().find('#search_concept').text($(this).text());
});

而我似乎找不到它

固定的

$('.search-panel #dd1, .search-panel #dd2').find('a').click(function(e) {
    e.preventDefault();
    var param = $(this).data("info");

    $(this).parents('.search-panel').find('button').html($(this).text() + ' <span class="caret"></span>');
});

$（'.search panel#dd1、.search panel#dd2'）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var param=$（此）.data（“信息”）；
$（this）.parents（'.search panel'）.find（'button'）.html（$（this）.text（）+''）；
});

您不能有多个相同的ID

$(this).parents().find("button #search_concept").text($(this).text());

---

下面的代码段使用jQuery的

.parents

查找按钮

$（this）.parents（选择器）

将查找具有指定选择器的任何父元素

然后

.find（selector）

将在该父元素中搜索指定的选择器

然后可以将其分配给变量并使用元素

$（'.search panel#dd1'）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var param=$（此）.data（“信息”）；
var text=$（this.text（）；
//将元素指定给变量，以便以后进行操作
var$button=$（this）.parents（'.search panel'）.find（'button'）；
//例如：替换按钮文本（替换包括html在内的所有内容）
//$button.text（文本）
//例如：在$button中找到另一个元素并替换文本
//$button.find（“#搜索_概念”）.text（text）
});

类型




您有重复的ID，这会让事情变得一团糟。我将改变在id上传递给其他选择器的概念，例如类：

这样，您可以将
搜索面板
组视为一个小部件，javascript将被重写为：


$（'.search panel'）。每个（函数（）{
var search_concept=$（this.find（“.search_concept”）；
$（this）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var param=$（此）.data（“信息”）；
search_concept.text（$（this.text（））；
});
});

类型




位置




你能详细说明为什么第一个选择器会按照OP的要求进行选择吗？将会有多个相同的模块ID，我不想更改所有选择框的文本。假设
按钮#search_concept
之间的空格是拼写错误。顺便说一句，空格之间没有拼写错误。
$(this).parents().find("button #search_concept").text($(this).text());