在jquery中传递变量作为类名

Question

我在变量'classN'中拥有类名'views-row5'。我想将它传递给jquery，以便使用变量'classN'查找类名'views-row5' '并添加类'hello'。

jQuery(document).ready(function($) { 
 
var classN="views-row5" 
 
$('.carousel-inner li').each(function() 
 
    {$(this).find(classN).addClass('hello');}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel-inner"> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
</div>

Answer 1

jQuery(document).ready(function($) { 
 
    var classN = "views-row5" 
 
    $('.carousel-inner li').each(function() { 
 
    $(this).find("."+classN).addClass('hello'); 
 
    }); 
 
});

.hello { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel-inner"> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
</div>

1. 添加.找到你正在寻找

Answer 2

类你是忘了该.代表类选择

jQuery(document).ready(function($) { 
 
var classN="views-row5" 
 
$('.carousel-inner li').each(function() 
 
    {$(this).find('.'+classN).addClass('hello');}); 
 
});

.hello{ 
 
color:green; 
 
font-size:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel-inner"> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
</div>

Answer 3

在变量赋值，必须添加点的类。像var classN=".views-row5"

jQuery(document).ready(function($) { 
 
var classN=".views-row5" 
 
$('.carousel-inner li').each(function() 
 
    {$(this).find(classN).addClass('hello');}); 
 
});

.hello { 
 
color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="carousel-inner"> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
    <li> 
 
    <div class="views-row4">1</div> 
 
    <div class="views-row5">2</div> 
 
    </li> 
 
</div>

Answer 4

试试这个代码：

jQuery(document).ready(function($) { 
    var classN="views-row5" 
    $('.' + classN).addClass('hello'); 
});