如何在不同的<div>下选择相同类的特定<span>

Question

对于不同的控制，我有不同的跨度和相同的等级... 如何一次为关联控件选择一个特定的范围。我应该为每个范围使用diff span id。

Answer 1

如果您有多个包含SPAN的DIV：

<div>
    <span>Text 1</span>
</div>
<div>
    <span>Text 2</span>
</div>

您可以通过多种方式单独选择它们。

以下是一些：

为元素

分配ID

您可以分配DIV ID并按如下方式选择它们：

<div id="first">
    <span>Text 1</span>
</div>
<div id="second">
    <span>Text 2</span>
</div>

CSS选择器：

#first span { /* Add style rules here! */ }
#second span { /* Add style rules here! */ }

使用jQuery选择：

var first = $('#first span');
var second = $('#second span');

或者提供跨度ID并按如下所示选择它们：

<div>
    <span id="first">Text 1</span>
</div>
<div>
    <span id="second">Text 2</span>
</div>

CSS选择器：

#first { /* Add style rules here! */ }
#second { /* Add style rules here! */ }

使用jQuery选择：

var first = $('#first');
var second = $('#second');

将类分配给元素

与ID一样，为DIV分配识别类：

<div class="first">
    <span>Text 1</span>
</div>
<div class="second">
    <span>Text 2</span>
</div>

CSS选择器：

.first span { /* Add style rules here! */ }
.second span { /* Add style rules here! */ }

使用jQuery选择：

var first = $('.first span');
var second = $('.second span');

或者为Spans分配课程：

<div>
    <span class="first">Text 1</span>
</div>
<div>
    <span class="second">Text 2</span>
</div>

CSS选择器：

.first { /* Add style rules here! */ }
.second { /* Add style rules here! */ }

使用jQuery选择：

var first = $('.first');
var second = $('.second');

使用:nth-child()选择器：

为此，我们需要修改标记以包含我们可以选择的父元素：

<article>
    <div>
        <span>Text 1</span>
    </div>
    <div>
        <span>Text 2</span>
    </div>
<article>

然后我们可以使用article选择article:nth-child(n)的孩子：

CSS选择器：

article:nth-child(1) span { /* Add style rules here! */ }
article:nth-child(2) span { /* Add style rules here! */ }

使用jQuery选择：

var first = $('article:nth-child(1) span');
var second = $('article:nth-child(2) span');

Answer 2

如果你正在使用jquery，就这样做：

$('span[class="yourclassname"]')

Answer 3

是的，你可以找到使用J查询代码将帮助你

   <script type="text/javascript">
           $(function () {                    
               var Span = $("#ControlID .SpanClass");
           });
   </script>