代码之家  ›  专栏  ›  技术社区  ›  Alex

jquery-获取基于前缀的元素类

  •  21
  • Alex  · 技术社区  · 15 年前

    从下面元素的类中获得类似“fade”的字符串的最快方法是什么?

    <div class="MyElement fx-fade"> ... </div>
    
    7 回复  |  直到 6 年前
        1
  •  14
  •   Tomas    11 年前
    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];
      }
    }
    
        2
  •  71
  •   Tom    15 年前

    如果您想查找以“淡出”结尾的内容,可以使用:

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

    对于以“fade”开头的类的元素,可以使用:

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

    要获得包含“fade”的元素,您需要使用(这比通过类名字符串更快)

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

    “*”获取所有元素,以便您可以用所需的元素替换它。

    如果需要类名称以“fx-”开头的元素,可以执行以下操作:

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

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

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

    更多信息,请访问 jquery.com

        3
  •  4
  •   Krunal    15 年前

    试试这个:

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

    More info

        4
  •  2
  •   Community Mohan Dere    8 年前

    退房 JQuery selector regular expressions . 可能正是你需要的!:)

        5
  •  1
  •   Jake    15 年前

    我可能会选择:

    //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];
      }
    }
    
        6
  •  0
  •   Philipp    6 年前

    问题标题和问题不完全匹配(标题要求前缀,问题要求后缀/部分)


    1。按类前缀选择元素

    结合以下两个jquery/css选择器:

    $( "[class^='fx-'],[class*=' fx-']" )
    
    • [class^='fx-'] Starts-With-Selector
      查找整个类属性的第一个字母以“fx-”开头的元素
      例如 <a class="fx-fade MyElement anything">
    • [class*=' fx-'] Contains-Selector
      查找元素,其中 空间+“FX” 在class属性内的任何位置找到
      例如 <a class="MyElement fx-fade anything">

    此选择器确保不会出现误报,例如 <a class="MyElement sfx-none">


    2。按类后缀选择元素

    几乎与前缀选择器相同:

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

    此选择器确保不会出现误报,例如 <a class=“myelement sfx none”>


    三。按类子字符串选择元素

    当需要查找既不是类名的开始也不是结束的子字符串时,请使用其他答案中建议的选择器:

    $( "[class*='fade']" )
    
    • [class*='fade'] 包含选择器
      查找元素的位置 “褪色” 在class属性内的任何位置找到
      例如 <a class="fx-fade-out">

    警告:这也会发现 "no-fade" "faded" . 小心使用包含选择器!

        7
  •  -1
  •   Dennis Stolmeijer    10 年前

    我们在网站上使用的这个简单片段:

    /**
     * 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;
        });
    });