Javascript或JQuery字符串获取具有特定前缀的子字符串

时间:2015-08-18 18:04:53

标签: javascript jquery css regex

我有一个包含许多类的元素,我想访问一个特定的类来获取它的最后一位数字(我意识到数据属性或ID可能是更好的选择但是现在我被课程困住了)。我已经能够使用它的ID选择元素,所以我只需要确定my-target- *的最后一位数字。

实施例

<div class="foo bar apple my-target-1"></div>

我想获取类my-target- *然后从中提取1。

6 个答案:

答案 0 :(得分:2)

遍历包含&#39; my-target&#39;的所有元素,假设它是最后一个类,按空格分割类,获取最后一个类,将其拆分为&#39; - &#39;然后获得所需的值来提取。

这是一个有效的例子:

&#13;
&#13;
$(document).ready(function(){

 $("[class*= my-target]").each(function(){

    var extract= $(this).attr('class').split(' ').pop().split('-').pop();
    $("#result").html(extract);
    
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo bar apple my-target-1"></div>
<span id="result"></span>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这是一个应该以你的元素为目标的jQuery选择器:

$("[class*=my-target]");

但这可能比你需要的更通用:它使用CSS substring 选择器*=,所以这也会匹配如下的元素:

<div class="not-my-target"></div>

您可以尝试使用选择器组合来获得更具体的内容:

 $("[class^=my-target], [class*= my-target"]);

这将CSS 开头与选择器与contains。

组合在一起

现在要从类名中获取所需的数据,您需要对class属性进行一些字符串解析:

var numberToExtract = -1;

var elem = $("[class*=my-target-]");

if (elem)
{
    classes = elem.attr("class").split(/\s+/);

    $.each(classes, function(idx, el)
    {
        if (el.startsWith("my-target-"))
        {
            numberToExtract = el.split("-").pop();
            return false;
        }
    });
}

答案 2 :(得分:0)

如果使用数据元素来执行此操作,可能更整洁

<div class="foo bar apple my-target-1" data-target="1"></div>

你可以这样做:

$('.my-target-1').data('target')

比分析课程

更好

答案 3 :(得分:0)

要从这些类开始任何一个尝试这个

$('div[id^=foo bar apple my-target]')

答案 4 :(得分:0)

如果您使用类而不是数据属性,则可以从您找到的对象中提取完整的类字符串:

obj.attr('class')

然后将其与使用单词边界并捕获括号的正则表达式进行匹配,以提取'my-target-*'

末尾的数字

答案 5 :(得分:0)

您必须拥有ID才能捕获特定的div或span内容。 小心,也许,你有一个类和一个子类。

<div id='id' class='myclass mysubclass' >Testing</div>

因此,如果您想拥有类选择器,请执行以下操作:

var className = '.'+$('#id').attr('class').split(' ').join('.')

你会有

.myclass.mysubclass

现在,如果要选择具有相同类的所有元素,例如上面的div:

var class=$('.'+$('#id').attr('class').split(' ').join('.'))

这意味着

var class=$('.myclass.mysubclass')

如果你想让第二个类成为使用元素的多个类

var class_name = $('#id').attr('class').split(' ')[1];`

或者您可以简单地使用var className = $('#id').attr('class');这将返回全名类和子类,然后使用JQuery / JavaScript子字符串方法处理它。