Javascript jQuery - 根据前缀获取元素类

jQuery - Get a element class based on a prefix

提问by Alex

What's the fastest way possible to get a string like "fade" from the classes in the element below?

从下面元素的类中获取像“fade”这样的字符串的最快方法是什么？

<div class="MyElement fx-fade"> ... </div>

采纳答案by Peter Kruithof

var classes = $('.MyElement').attr('class').split(' ');
for (var i = 0; i < classes.length; i++) {
  var matches = /^fx\-(.+)/.exec(classes[i]);
  if (matches != null) {
    var fxclass = matches[1];
  }
}

回答by

If you wanted to look for something that ended in 'fade' you would use:

如果您想查找以“淡入淡出”结尾的内容，您可以使用：

$("*[class$='fade']")

And for elements with a class that started with 'fade' you would use:

对于类以 'fade' 开头的元素，您将使用：

$("*[class^='fade']")

And to get elements that contain 'fade' you would use (this would be quicker than going through the class names string)

并获取包含“淡入淡出”的元素，您将使用（这比通过类名字符串更快）

$("*[class*='fade']")

The "*" gets all elements so you could replace this with the element you wanted.

“*”获取所有元素，因此您可以将其替换为您想要的元素。

If you want elements that has a classname that starts with 'fx-' you would do:

如果您想要具有以“fx-”开头的类名的元素，您可以这样做：

var classname = "";
var elArray  = $("*[class*='fx-']");

for (var a= 0; a < elArray .length; a++)
{
   //fade
   classname = elArray[a].split("-")[1]; 
}

The array used in the for loop would have all the elements with the classnames like 'fx-'.

for 循环中使用的数组将包含类名类似于“fx-”的所有元素。

Rather than than the for loop checking the elements for the correct class name.

而不是 for 循环检查元素的正确类名。

More information at jquery.com

更多信息请访问jquery.com

回答by Krunal

Try this:

尝试这个：

$("div[class*='fade']") 

More info

更多信息

回答by Philipp

The question title and the question do not exactly match (title asks for prefix, question asks for suffix/partial)

问题标题和问题不完全匹配（标题要求前缀，问题要求后缀/部分）

---

---

1. Select elements by class-prefix

1.通过class-prefix选择元素

Combine following two jQuery/CSS selectors:

结合以下两个 jQuery/CSS 选择器：

$( "[class^='fx-'],[class*=' fx-']" )

• [class^='fx-']Starts-With-Selector
  Find elements where the first letters of the entire class attribute starts with "fx-"
  e.g. <a class="fx-fade MyElement anything">
• [class*=' fx-']Contains-Selector
  Find elements where a space + "fx-"is found anywhere inside the class attribute
  e.g. <a class="MyElement fx-fade anything">

• [class^='fx-']Starts-With-Selector
  查找整个类属性的第一个字母以“fx-”开头的元素，
  例如<a class="fx-fade MyElement anything">
• [class*=' fx-']contains-Selector
  查找元素，其中在 class 属性中的任何位置都可以找到空格 + "fx-"，
  例如<a class="MyElement fx-fade anything">

This selector makes sure, that you do not get false positives such as <a class="MyElement sfx-none">

此选择器可确保您不会得到误报，例如 <a class="MyElement sfx-none">

---

---

2. Select elements by class-suffix

2.通过class-suffix选择元素

Almost identical to the prefix selector:

几乎与前缀选择器相同：

$( "[class$='-fade'],[class*='-fade ']" )

• [class$='-fade']End-With-Selector
  Find elements where the last letters of the entire class attribute are with "-fade"
  e.g. <a class="MyElement anything fx-fade">
• [class*='-fade ']Contains-Selector
  Find elements where a "-fade" + spaceis found anywhere inside the class attribute
  e.g. <a class="anything fx-fade MyElement">

• [class$='-fade']End-With-Selector
  查找整个类属性的最后一个字母带有“-fade”的元素，
  例如<a class="MyElement anything fx-fade">
• [class*='-fade ']包含选择器
  查找在类属性内的任何位置找到“-fade”+空格的元素，
  例如<a class="anything fx-fade MyElement">

This selector makes sure, that you do not get false positives such as <a class="MyElement sfx-none">

此选择器可确保您不会得到误报，例如 <a class="MyElement sfx-none">

---

---

3. Select elements by class-substring

3.通过class-substring选择元素

When you need to find a substring that is neither the start nor the end of a class name, use the selector suggested in the other answers:

当您需要查找既不是类名的开头也不是结尾的子字符串时，请使用其他答案中建议的选择器：

$( "[class*='fade']" )

• [class*='fade']Contains-Selector
  Find elements where "fade"is found anywhere inside the class attribute
  e.g. <a class="fx-fade-out">

• [class*='fade']包含选择器
  查找在类属性中的任何位置都可以找到“淡入淡出”的元素，
  例如<a class="fx-fade-out">

Warning: This also finds "no-fade"or "faded". Use the Contains-Selector with care!

警告：这也会找到"no-fade"or "faded"。小心使用包含选择器！

回答by Sai

Check out JQuery selector regular expressions. It might be exactly what you need! :)

查看JQuery 选择器正则表达式。它可能正是您所需要的！:)

回答by Jake

I'd probably go with something like:

我可能会选择类似的东西：

//Split class list into individual classes:
var classes = $(".MyElement").attr("class").split(" ");
var fxType;

//Loop through them:
for (var i = 0, max = classes.elngth; i < max; i++) {
  var class = classes[i].split("-");
  //Check if the current one is prefixed with 'fx':
  if (class[0] == "fx") {
    //It is an FX - do whatever you want with it, the type of FX is stored in class[1], ie:
    fxType = class[1];
  }
}

回答by Dennis Stolmeijer

This simple snippet we use in our sites:

我们在网站中使用的这个简单片段：

/**
 * Script to load a popup container for share buttons
 *
 * Possible usage for Facebook, Twitter and Google:
 *
 * <a class="share-buttons-fb" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_the_permalink(); ?>&title=<?php the_title(); ?>">Facebook</a>
 * <a class="share-buttons-twitter" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>: <?php echo get_the_permalink(); ?>">Twitter</a>
 * <a class="share-buttons-google" href="http://plus.google.com/share?url=<?php echo get_the_permalink(); ?>">Google+</a>
 */
jQuery(document).ready(function ($) {

    // Whenever an anchor with the class with share-button in it is clicked
    $("a[class*='share-button']").click(function () {
        // Variables to set the size of the popup container
        var windowWidth = 500;
        var windowHeight = 255;

        // Variables to set the position of the popup container
        var positionWindowLeft = (screen.width / 2) - (windowWidth / 2);
        var positionWindowTop = (screen.height / 3) - (windowHeight / 3);

        // Create new windows with the opening url of the href attribute of the anchor and the above variables
        var popupWindow = window.open($(this).prop('href'), '', 'scrollbars=no,menubar=no,status=no,titlebar=no,toolbar=nolocation=no,menubar=no,resizable=noe,height=' + windowHeight + ',width=' + windowWidth + ',top=' + positionWindowTop + ', left=' + positionWindowLeft);

        // If the default windows is focused
        if (window.focus) {
            // Change the focus to the the popup window
            popupWindow.focus();
        }

        return false;
    });
});