Question

使用$(elem).attr("class")或elem.className返回一个空格分隔的类名列表

是否有更好的方法将其转换为选择器而不是

"." + classNamesString.split(" ").join(".")

示例

<div class="a b c"></div>
<div class="a b c"></div>
<div class="a b c"></div>
<div class="a b c"></div>
<div class="a b d"></div>
<div class="a b c"></div>
<div class="a b c"></div>

$("a").click(function(){

  var classNames = $(this).attr("class");
  $("body").find( < use classNames > ).colorBlue();

});

我试图避免使用微小的实用程序函数并搜索一些jQueryesque方法来执行此操作，如果可能的话

Answer 1

您可以通过用句点替换空格来简化它：

"." + classNamesString.replace(/ /g,".")

Answer 2

例如

html

<div class="hai bye hello">Text</div>

jquery是

$("." + $('div').attr('class').split(" ").join(", .")).click(function() {

   alert('hello') 
});

你的背景是

 $("body").find("." + $('div').attr('class').split(" ").join(", .")).css('color', 'blue');

Fiddle

Answer 3

如果在HTML标记中始终以相同顺序设置类似的类，则可以使用属性选择器：

$("body").find( '[class="' + classNamesString + '"]' ).colorBlue();

Answer 4

如果您可以尝试：

var class_element = ($(element).attr("class")).split(" ").join(", ."); $(class_element).yourfunction();

Answer 5

尝试使用.filter()

$("div").click(function() {

  var classNames = $(this).attr("class");
  var _selector = $("body *").filter(function() {
    return this.className === classNames
  });
  _selector.css("color", "blue");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a b c">abc</div>
<div class="a b c">abc</div>
<div class="a b c">abc</div>
<div class="a b c">abc</div>
<div class="a b c">abc</div>
<div class="a b c">abc</div>
<div class="d e f">def</div>
<div class="a b c">abc</div>

将元素类转换为选择器

5 个答案: