如何仅使用jquery为中间3 div设置颜色

Question

<div>
    <div>
        <div>test1</div>
        <div>test2</div>
        <div class="middle">test3</div>
        <div>test4</div>
        <div>test5</div>
    </div>
</div>

在上面的示例中，我如何只为text2，text3和text4

着色

Answer 1

我可能误解了你的问题。你的意思是＆＃34;除了第一个和最后一个＆＃34;？如果是这样，那么我的回答是有效的（或者如果你只有5个div ...）。否则请使用mplungjan's answer。

选择容器子节点的所有div，第一个和最后一个除外。

＆＃13;

＆＃13;

$('.container > div').not(':first').not(':last').css('color', 'red');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
  <div class='container'>
    <div>text 1</div>
    <div>text 2</div>
    <div>text 3</div>
    <div>text 4</div>
    <div>text 5</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在addBack

中使用prev和next

$('.middle').next().addBack().prev().addBack().css('background-color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div>
    <div>test1</div>
    <div>test2</div>
    <div class="middle">test3</div>
    <div>test4</div>
    <div>test5</div>
  </div>
</div>

Answer 3

jQuery中选择元素序列的最佳方法之一是slice()方法。非常简单明了 -

＆＃13;

＆＃13;

$(document).ready(function(){
  $('div div div').slice(1,4).css('color','red');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <div>
        <div>test1</div>
        <div>test2</div>
        <div class="middle">test3</div>
        <div>test4</div>
        <div>test5</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;