从div类中提取特定值

Question

我有一个div标签，看起来像这样：

<div id="some id here" class="portlet portlet_15 portlet_content_15 new" >some content here</div>

我知道我可以使用这样的jquery获取此id的{​​{1}}：

div

但是，如何仅从上面的$(this).closest("div").attr("id") 中提取portlet_15，其中class可以是任意数字？

以下是代码摘录，显示了我目前所处的位置并发送了15的{​​{1}}：

id

我在上面代码的div部分添加了一个注释$.ajax({ url: 'some web service, type: 'POST', data: { strID:$(that).closest("div").attr("id"), strClass:"need to send the class value too right here, in this case it would be portlet_15" }, error: function(xhr, status, error) { //some error message; }, success: function() { //some success task } }); 应该去的地方。

Answer 1

您现有的代码有点令人困惑，因为您没有告诉this指的是什么。如果它引用了您的特定div元素，则使用closest不正确，因为它已遍历DOM层次结构。

但是如果你想获得特定元素的所有CSS类，那么你需要调用它：

$(this).attr("class").split(" ");
// in your case this would return an array of classes:
// ["portlet", "portlet_15", "portlet_content_15", "new"]

this当然是指有问题的元素。然后，您可以轻松地按照自己喜欢的方式解析各个类。如果你想提取数字，你可能会使用正则表达式：

/portlet_(\d+)/i;

使用data-属性

但正如其他人所说，如果您使用数据属性执行此操作，那么获取数据会更好：

<div id="some id here"
     class="portlet new"
     data-portlet="15"
     data-portlet-content="15">
         some content here
</div>

在这种情况下，两个与portlet相关的类都作为数据属性提供，您可以使用以下方法轻松访问：

$(this).data("portlet"); // would return 15
$(this).data("portletContent"); // would return 15
$(this).data("portlet-content"); // would return 15

最后两个是使用连字符名称访问相同数据属性的变体。

Answer 2

试试这个：

var c = $('#here').attr("class").split(' ')[1];
var cls = c.substr(-2);

http://jsfiddle.net/caCPv/1/

Answer 3

你也可以这样做一个正则表达式：

var found = $('#here').attr("class").match(/portlet_\d{1,3}/);

Answer 4

Maibe使用正则表达式：

var element = $(that).closest("div");
var strClass = element.attr("class").match(/portlet_\d+/i);

在你的ajax中：

data: { strID: element.attr("id"), strClass: strClass[0] },