Question

我有一个包含输入文本的元素，以使用jQuery方法find来获取输入文本。

输入文本的类名称为page-id-x，x是可变的，所以我想在子串page-id之后选择该数字，这就是我尝试过的：

var id = ui.item.find('input').attr('class').split(/\s+/).filter(function(s){
    return s.includes('page-id-');
})[0].split('-')[2];
console.log(id);

我认为这段代码过于复杂，但我无法找到其他方法。

如果有人知道更好的方式，我会感激不尽。

提前致谢。

Answer 1

当您使用jQuery时，请看一下：https://api.jquery.com/category/selectors/attribute-selectors/

对于您的情况，您可以使用$('[class^="page-id-"')。这些类型的选择器（在上面的链接中列出）实际上也适用于CSS。（至少大多数应该，如果不是全部的话。）

要获取page-id-之后的数字，我的建议是将该数字存储在其他HTML属性中，例如data-pageID="1"等。

所以你可以：

<div id="page-id-3" data-pageID="3">CONTENT</div>

然后，当您使用$('[class^="page-id-"')获取DOM元素时，可以使用.attr('data-pageID').val()访问该数字。

Answer 2

我将假设x的{{1}}部分，而不是page-id-x部分，是变化的（因为这是您的代码所假设的）。

另一种方法是使用正则表达式，但我不确定我是否称之为更简单：

id

示例：

＆＃13;

var id = ui.item
  .find('input')
  .attr('class')
  .match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];

＆＃13;

var ui = {
  item: $("#item")
};
var id = ui.item
  .find('input')
  .attr("class")
  .match(/(?:^|\s)page-id-([^- ]+)(?:\s|$)/)[1];
console.log(id);

＆＃13;

以上内容与您当前代码的假设相同，即：

<div id="item"> <input class="foo page-id-23 bar"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>中的第一个input是您想要的
将具有相关的班级名称

我认为这些都没问题，因为你的问题是要求另一种选择，建议你的工作正在发挥作用。

Answer 3

如果您可以控制HTML标记，而不是使用类名，则可以使用数据属性。例如，而不是：

<input class="page-id-1">

您可以使用：

<input data-page-id="1">

然后jQuery可以毫不费力地找到这个元素：

$('[data-page-id]').attr('data-page-id')

Answer 4

您可以使用this.mydata: Array<any> = []; private fetchWithMqtt(){ var client = mqtt.connect('ws://' + this.ip + ":" + Number(this.port) + "/mqtt"); // set callback handlers client.on('close', this.onConnectionLost); client.on('message', this.onMessageArrived); client.on('connect', this.onConnect); } private onMessageArrived(topic, message) { let tempDataset = JSON.parse(message).dataset; this.mydata.push({ //this.mydata is undefined because this = mqtt-client x: tempDataset[0], y: tempDataset[1] });选择器找到您的元素。

*=

获得元素后，您可以解析id：

let elem = document.querySelector('[class*=page-id-]')

在元素的类名中的子字符串后面选择一个字符串

4 个答案: