Question

我是jQuery的新手所以如果问题太基础，请原谅我。

如果我知道类的名称，我知道如何使用相同的类定位两个或更多元素。我的问题是我正在构建的网站中的许多类的名称是动态创建的。所以，我对这些课程的具体名称没有多少控制权。

我想要做的是定位2个元素，当他们拥有相同的类时，即使我不知道该类的名称。< / p>

例如：

<a href="#" class="title25">Some text</a>
<figcaption class="title25">Some text</figcaption>

所以，当这些元素具有相同的类（不管它是什么）做某事时，当他们不做其他事情但没有在我的jQuery中提供类似.title25的东西时。

Answer 1

这样的事情：

$("a").each(function(index, element) {
    var class = $(element).attr("class");
    if(class.length > 2) {
       // do something
    }
});

未经测试..

Answer 2

首先获取所有<?php // Installer file to create an attribute name "approved" inside Default attribute set $installer = $this; $setup = new Mage_Eav_Model_Entity_Setup('core_setup'); $installer->startSetup(); // the attribute added will be displayed under the group/tab Special Attributes in product edit page $setup->addAttribute('catalog_product', 'approved', array( 'group' => 'Default', 'input' => 'select', 'type' => 'int', 'default' => '0', 'label' => 'Testing', 'backend' => '', 'visible' => 0, 'required' => 0, 'user_defined' => 0, 'searchable' => 0, 'filterable' => 0, 'comparable' => 0, 'visible_on_front' => 0, 'visible_in_advanced_search' => 0, 'is_html_allowed_on_front' => 0, 'global' => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL, )); $installer->endSetup(); ?>元素，然后为每个元素查找具有相同类的a

figcaption

当然，您可以检查您是否只获得了一个figcaption对应的元素，但我会充分利用你。

Answer 3

普通JavaScript：

使用querySelectorAll()
将每个NodeList转换为Array.prototype.slice.call()
将两个数组合并为concat()
遍历合并的数组，并在每次迭代时找到元素＆＃39; s className
然后unshift（或push）className成新阵列
通过函数findTwin()
findTwin()
- 循环遍历数组的长度，并将每个元素存储在一个对象中，以与下一个元素进行比较。
- 匹配和单个分为一组双打和一组独特的。
- 返回带有双精度数组的数组，如果需要，可以使用修改后的单数组。
- 该片段有一系列锚点和标题。有2个双打：title25和title00。

<强>段

＆＃13;

var ancs = document.querySelectorAll('a');
var caps = document.querySelectorAll('figcaption');

var aArray = Array.prototype.slice.call(ancs);
var cArray = Array.prototype.slice.call(caps);

var mergedArray = aArray.concat(cArray);
var total = mergedArray.length;

var classArray =[];

for (var i = 0; i < total; i++) {
  var aClass = mergedArray[i].className;
  classArray.unshift(aClass);
}


var twins = findTwin(classArray);

console.log('matched: ' + twins);

function findTwin(arr) {
  var singleArray = [];
  var doubleArray = [];
  var total = arr.length;
  var sorted = {};

  while (total--) {
    var item = arr[total];

    if (!sorted[item]) {
      singleArray.unshift(item);
      sorted[item] = true;
    } else {
      doubleArray.unshift(item);
      sorted[item] = true;
    }
  }
  return doubleArray;
}

＆＃13;

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<a href="#" class="title00">Some text</a>
<figcaption class="title05">Some text</figcaption>
<a href="#" class="title55">Some text</a>
<figcaption class="title27">Some text</figcaption>
<a href="#" class="title28">Some text</a>
<figcaption class="title85">Some text</figcaption>
<a href="#" class="title25">Some text</a>
<figcaption class="title25">Some text</figcaption>
<a href="#" class="title35">Some text</a>
<figcaption class="title00">Some text</figcaption>
<a href="#" class="title45">Some text</a>
<figcaption class="title26">Some text</figcaption>

＆＃13;

Answer 4

这可以通过多种方式实现。我会这样做 - 要求页面中使用的所有类型的类。然后在循环中使用它们访问元素会很容易。这对于你真正想要用它们做什么是主观的。

我的代码是：

<a href="#" class="title25">Some text1</a>
<figcaption class="title25">Some text2</figcaption>
<div class="title30">Some text3</div>
<span class="title30">Some text4</span>
<p class="title50">Some text5</p>
<ul class="title50">
  <li>Some text6</li>
</ul>

这里的例子用jQuery显示。您还可以使用原始javascript或任何其他框架。

var classes = [];
$('[class]').each(function(){
     $($(this).attr('class').split(' ')).each(function() { 
        if (this.length>0 && $.inArray(this.valueOf(), classes) === -1) {
            classes.push(this.valueOf());
        }    
    });
});

console.log(classes);

classes.forEach(function(i){
  $('.'+i+':first').attr("style", "color: red;");
  $('.'+i+':last').attr("style", "color: green;");

  $('DIV.'+i).attr("style", "font-size: 24px;");
  $('p.'+i).attr("style", "font-weight: 800;");
  $('span.'+i).attr("style", "text-decoration: underline;");
});

JSFiddle Link：https://jsfiddle.net/27g7aayt/1/

如何在不指定类名称的情况下定位具有相同类的元素

4 个答案: