Question

我有更多类似下面的div：

<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Classic</a>
      (1)
    </span>
  </div>
</div>

<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Salsa</a>
      (1)
    </span>
  </div>
</div>

每个标签都有自己的类别。如何获取类别的文本并将其作为类添加到标记中？

我这样做了：

var category = $('span.adverts-widget-grid-link a').text();
    console.log(category);
    $('span.adverts-widget-grid-link a').each(function(){
        $(this).addClass(category);
        console.log(category);
});

但它同时采用所有类别并添加为类名。

希望我的解释有道理。提前致谢

Answer 1

在您的代码中，您将在错误的位置获取类别名称。您只需要在each循环中获取类别名称。尝试这样的事情：

 $('span.adverts-widget-grid-link a').each(function(){
        $(this).addClass($(this).text());
        console.log(category);
});

而不是：

var category = $('span.adverts-widget-grid-link a').text();
    console.log(category);
    $('span.adverts-widget-grid-link a').each(function(){
        $(this).addClass(category);
        console.log(category);
});

＆＃13;

$('span.adverts-widget-grid-link a').each(function(){
        $(this).addClass($(this).text());
});

＆＃13;

.Classic{
 color: red;
}

.Salsa{
 color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Classic</a>
      (1)
    </span>
  </div>
</div>

<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Salsa</a>
      (1)
    </span>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Classic</a>
      (1)
    </span>
  </div>
</div>

<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Salsa</a>
      (1)
    </span>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Classic</a>
      (1)
    </span>
  </div>
</div>

<div class="adverts-grid-row">
  <div class="adverts-col-100">
    <span class="adverts-widget-grid-link adverts-icon-folder ">
      <a href="http://www.parilinx.burnnotice.co.za/advert-category/classic/">Salsa</a>
      (1)
    </span>
  </div>
</div>

＆＃13;

选中此代码段，此each为所有类别添加类，我只需添加一个更改字体的类，您就可以看到效果。

Answer 2

//将鼠标悬停在每个列表项上以获取每个列表项的工具提示

var category = $('span.adverts-widget-grid-link a').text();
console.log(category);
$('span.adverts-widget-grid-link a').each(function(){
        //var val = $(this).text();
    $(this).addClass($(this).text());
    $(this).attr('title',$(this).text());
    console.log(category);

}）;

如何获取元素的文本并在jquery

2 个答案: