当我只知道jQuery元素内的文本时，如何使用jQuery查找元素ID？

Question

我有一个id为"main-form"的表单，在其中有一个class为"block-footer"的元素。

在这个元素中，有一个子元素：

<button type="button">Submit</button>

如何使用jQuery查找没有添加Id的按钮？该按钮的文本始终为“提交”。

在选择时，是否值得使用id =“main-form”作为起点以使其更有效率？

- user1321237

Answer 1

选择所有 <button> 元素，然后根据它们的 innerHTML 进行筛选：

$('button').filter(function() {
  return this.innerHTML == 'Submit';
});

如果需要的话，你可以更明确地只选择 type="button" 的按钮元素，尽管这样会略微降低效率：

$('button[type="button"]').filter(function() {
  return this.innerHTML == 'Submit';
});

关于您的评论：

我能否使它更有效率，因为我知道该按钮在一个我知道的带有类名的 div 中，也在我已知 ID 的表单中？

当然可以。

var $container = $('.element-that-contains-the-button');
$('button', $container).filter(function() {
  return this.innerHTML == 'Submit';
});

您也可以使用$container.find()，其效果完全相同。

- Mathias Bynens

---

我能否使它更有效率，因为我知道该按钮位于我所知道的类别和已知ID的表单内？ - user1321237

Answer 2

这将选择所有包含文本“提交”的按钮。

$('button:contains("Submit")')...

或者如果您对该元素更了解，可以在内部找到它：

$('.block-footer button:contains("Submit")')...

- grc

---

这也会匹配<button>Not the Submit you’re looking for</button>。 - Mathias Bynens

但是我能否让它更高效一些，因为我知道该按钮位于我所知道的具有类的 div 和我的表单内部的已知 ID 中？ - user1321237

Answer 3

你可以使用 jQuery 包含选择器。

var yourButton = $('button:Contains("Submit")');

- Rob Rodi

---

那也将匹配<button>不是你要找的提交按钮</button>。 - Mathias Bynens

Answer 4

使用:contains选择器。

这将适用于您的问题：

$(":contains('Submit')").Action()

- Abadinis

---

这也将匹配<button>Not the Submit you’re looking for</button>。 - Mathias Bynens

Answer 5

既然您已经知道了表单ID，那么您只需要循环每个按钮元素并检查它是否包含“提交”文本。

    $(document).ready(function(){
        $("#main-form button").each(function(e){
             var btnCaption = $(this).text();
            if(btnCaption == 'Submit'){
                //do something
                alert('hey, i am the submit button');
            }
        });

    });

我已经包含了一个工作示例DEMO

- Bob

Answer 6

jQuery('#main-form button:contains("submit")') 将返回主表单中文本为 "submit" 的提交按钮。

- sushil bharwani

---

我的按钮没有提交类型 :-( - user1321237

已编辑并删除了 type=submit。 - sushil bharwani

现在它将选择主窗体内文本为“submit”的按钮。 - sushil bharwani

Answer 7

你可以管理这段代码

jQuery（'document'）。ready（function（） { jQuery（'form'）。find（'button'）。addClass（'hi'） }）;

- ShibinRagh