如何使用 jQuery 在列表中选择正确的按钮？

关键词：

【中文标题】如何使用 jQuery 在列表中选择正确的按钮？【英文标题】：How to pick the right button within a list with jQuery? 【发布时间】：2019-10-07 21:39:59 【问题描述】：

我有一个不同服务器的列表。因此，当单击“连接”按钮时，我想连接到该特定服务器。 如何使用 jQuery 选择正确的按钮？提前谢谢！

% for  server in servers%
  % if server.credential.user == user %
    % if server.credential.protocol == 'vnc' %
      <a>
        <div class="p-l-20" id="server_details">
          <h4>server.name</h4>
          <h6>Hostname: server.hostname</h6>
          <h6>IP Address: server.ip</h6>
          <h6>Protocol: server.credential.protocol|upper</h6>
          <h6>User: server.credential.user</h6>
          <button type="button" >Connect</button>
        </div>
      </a>
    % endif %
  % endif %
% endfor %

【问题讨论】：

不是您问题的答案，但您正在为外观中的元素设置 id。这意味着可能有许多具有该 ID 的元素，这是不允许的。改用一个类。 【参考方案1】：

首先，删除父<a>，因为您不能嵌套可点击元素。其次，您正在创建许多具有相同 id 的元素，这是无效的，因为它们在 DOM 中必须是唯一的。将server_details 改为一个类。

要实现您的要求，请将事件处理程序添加到 button 元素。从那里您可以遍历 DOM 以找到必要的服务器信息。在下面的示例中，我在 IP 地址周围添加了一个span，并带有一个您可以定位到读取其text() 的类，但是对于您想要读取的任何其他详细信息，该模式都是相同的：

$('button').on('click', function() 
  var ip = $(this).closest('.server_details').find('.ip').text();
  console.log(ip);
);

.server_details 
  margin-bottom: 100px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p-l-20 server_details">
  <h4>server.name1</h4>
  <h6>Hostname: server.hostname1</h6>
  <h6>IP Address: <span class="ip">server.ip1</span></h6>
  <h6>Protocol: server.credential.protocol1|upper</h6>
  <h6>User: server.credential.user1</h6>
  <button type="button">Connect</button>
</div>
<div class="p-l-20 server_details">
  <h4>server.name2</h4>
  <h6>Hostname: server.hostname2</h6>
  <h6>IP Address: <span class="ip">server.ip2</span></h6>
  <h6>Protocol: server.credential.protocol2|upper</h6>
  <h6>User: server.credential.user2</h6>
  <button type="button">Connect</button>
</div>

【讨论】：

非常感谢！！它可以工作，但是当我将 var ip = $(this).closest('.server_details').find('.ip').text(); 更改为 var ip = $(this).closest('div').find('.ip').text(); 时，我得到了 IP 地址 听起来你没有将class 添加到父div，但只要你让它正常工作就可以了。如果有帮助，请不要忘记接受答案 我完全按照您所说的做了，但是使用 console.log 在浏览器控制台中没有显示任何内容，直到我按照我告诉您的那样将 '.server_details' 更改为 'div'。

如何触发选择的更改事件（jQuery）

】如何触发选择的更改事件（jQuery）【英文标题】：HowtotriggerchangeeventforChosen(jQuery)【发布时间】：2013-02-1216:55:01【问题描述】：在我点击重置按钮之前，我在选择（下拉列表）中选择“公司”。单击重置后，该事件通常会发生... 查看详情

如何在选项/选择标签循环之外的按钮中使用 Vue.js 中下拉列表的选定 ID

】如何在选项/选择标签循环之外的按钮中使用Vue.js中下拉列表的选定ID【英文标题】：HowtousetheselectedidofadropdowninVue.jsinabuttonoutsideofoption/selecttagloop【发布时间】：2021-12-2502:30:37【问题描述】：我正在尝试添加一个按钮来获取所选... 查看详情

jQuery mobile 未在列表中显示正确的选定项目

...2014-01-0912:01:44【问题描述】：我有一个选择列表。我正在使用jQuery来更新所选项目。当我更改所选值时，框中显示的项目不会更新。在以下示例中，选项“a”设置为选中。然后我使用jQuery将所选项目更改为“d”。它仍然显示“a... 查看详情

当我按下要检查的项目中的按钮以删除此项目时，如何自动选择正确的列表框项目？

】当我按下要检查的项目中的按钮以删除此项目时，如何自动选择正确的列表框项目？【英文标题】：HowcanIselecttherightListBoxItemautomaticallywhenIpresstheButtonintheItemIwanttoChecktodeletethisItem?【发布时间】：2021-09-1722:10:43【问题描述】：所... 查看详情

如何在 Django 中使用 Ajax JQuery 调用下拉列表 html 选择

】如何在Django中使用AjaxJQuery调用下拉列表html选择【英文标题】：HowtocalladropdownlisthtmlselectwithAjaxJQueryinDjango【发布时间】：2021-11-1500:58:29【问题描述】：我想在第一个选择下拉列表中选择一个选项，并且根据所选选项，ajax应该加... 查看详情

如何使用jquery禁用列表框中的多项选择？还是javascript？

...按钮在页面上从列表框中删除一项。任何人都可以帮助我如何停用或禁用列表 查看详情

如何在 iOS 中创建在每部 iPhone 中正确显示的按钮列表

】如何在iOS中创建在每部iPhone中正确显示的按钮列表【英文标题】：howtocreatealistofbuttonsiniOSwhichshowscorrectlyineveryiPhones【发布时间】：2017-10-1010:55:06【问题描述】：我对swift完全陌生，我想创建一个按钮列表，我需要连续三个按钮... 查看详情

如何使用 jQuery 在两个链接的、填充有 JSON 下拉列表的选项中预先选择一个选项？

】如何使用jQuery在两个链接的、填充有JSON下拉列表的选项中预先选择一个选项？【英文标题】：Howtopre-selectanoptionintwochained,populatedwithJSONdropdownlists,usingjQuery?【发布时间】：2021-10-1003:29:34【问题描述】：我有两个经典的连锁国家... 查看详情

如何始终使用 IE 和 FF 让 jQuery 以编程方式在此选择列表中的项目？

】如何始终使用IE和FF让jQuery以编程方式在此选择列表中的项目？【英文标题】：HowcanIgetjQuerytoprogrammaticallyitemsinthisselectlistusingIEandFFconsistently?【发布时间】：2014-03-1813:03:06【问题描述】：我有一些jQuery代码可以在选择列表中选择... 查看详情

我如何在 jquery 日期选择器中制作一个清晰的按钮

】我如何在jquery日期选择器中制作一个清晰的按钮【英文标题】：howicanmakeaclearbuttoninjquerydatepickerwork【发布时间】：2012-10-1503:41:29【问题描述】：我需要通过弹出窗口使用jQuerydatepicker来选择日期并填写不同窗口中的文本字段。... 查看详情

JQuery - 如何在多个 JQuery 克隆对话框中定位正确的按钮？

】JQuery-如何在多个JQuery克隆对话框中定位正确的按钮？【英文标题】：JQuery-HowtotargetcorrectbuttoninmultipleJQueryclonedDialogs?【发布时间】：2020-01-1219:27:18【问题描述】：我正在克隆多个JQueryDialog的实例：$(\'#button\').click(function()$(\'.dial... 查看详情

使用带有标签的select2 jquery插件：true，您如何防止选择出现在已选择的下拉列表中？

】使用带有标签的select2jquery插件：true，您如何防止选择出现在已选择的下拉列表中？【英文标题】：Withselect2jquerypluginwithtags:true,howcanyoupreventchoicesfromshowingupinthedropdownthatarealreadyselected?【发布时间】：2015-12-2404:48:50【问题描述】... 查看详情

如何使用 Jquery 从 UL 列表中仅选择悬停的项目

】如何使用Jquery从UL列表中仅选择悬停的项目【英文标题】：HowtoselectonlyhovereditemfromULlistusingJquery【发布时间】：2013-01-1813:07:10【问题描述】：好的，我有一个无序列表，它是通过从JSON对象附加li构建的。当我将鼠标悬停在UL上时... 查看详情

如何使用jquery在标签中显示多选下拉列表的选定文本？

】如何使用jquery在标签中显示多选下拉列表的选定文本？【英文标题】：Howtodisplayselectedtextofmultiselectdropdowninlabelusingjquery?【发布时间】：2016-09-1301:29:58【问题描述】：我正在使用BootstrapMultiselectdropdown。我想在标签中显示选定的... 查看详情

如何根据每个无序列表中的列表项的数量在 Jquery 中隐藏按钮元素

】如何根据每个无序列表中的列表项的数量在Jquery中隐藏按钮元素【英文标题】：HowtohidebuttonelementinJquerydependingthenumberoflistsitemineachunorderedlist【发布时间】：2021-11-0406:22:05【问题描述】：我想根据数字列表项隐藏/显示下面代码... 查看详情

Yii 使用 Jquery 从单选按钮列表中获取选定的值

】Yii使用Jquery从单选按钮列表中获取选定的值【英文标题】：YiigettingselectedvaluefromradiobuttonlistusingJquery【发布时间】：2012-08-0413:48:06【问题描述】：您好，我正在尝试执行一些Jquery表单逻辑，这取决于从先前选择的单选按钮中选... 查看详情

使用 JQuery 检查值是不是在选择列表中

...选择列表中【发布时间】：2011-01-1523:29:45【问题描述】：如何使用JQuery检查某个值是否属于下拉列表？【问题讨论】：【参考方案1】：使用AttributeEqualsSelectorvarthevalue=\'foo\';varexists=0!=$(\'#sel 查看详情

如何在rails中正确使用单选按钮？

】如何在rails中正确使用单选按钮？【英文标题】：Howtouseradiobuttoncorrectlyinrails?【发布时间】：2013-02-1004:49:35【问题描述】：我正在尝试创建一些单选按钮，但不知道该怎么做。在this问题之后，我的设置工作几乎正确，但我是新... 查看详情