Question

我只想要粉红色的作者2，如何使用.not（$ element）实现呢？

即我只希望第二个顶部元素（author2）为粉红色，而在列表中的第一个顶部元素（author1）后面。在这里，我们可以为多种类型提供多个此类列表。对于每种类型，我都希望作者2为粉红色

我不想更改角色文本的颜色

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("div  p").css("color", "blue");
      // I want only author 2 in pink, how do I achive this using .not($element) ?
      //$("div  p").css("color", "pink");
    });
  </script>
</head>

<body>

  <div>
    <div style="border:1px solid black;padding:10px;">
      <p>Author1</p>
      <div style="border:1px solid black;padding:10px;">
        <p>Role1</p>
      </div>
      <div style="border:1px solid black;padding:10px;">
        <p>Role2</p>
      </div>
    </div>
    <div style="border:1px solid black;padding:10px;">
      <p>Author2</p>
      <div style="border:1px solid black;padding:10px;">
        <p>Role1</p>
      </div>
      <div style="border:1px solid black;padding:10px;">
        <p>Role2</p>
      </div>
    </div>
    <button type="button" class="btn btn-link add">
      <span class="glyphicon glyphicon-plus"></span>
      <span class="controls-add-text"> Add another Author</span>
    </button>
  </div>

</body>

</html>

Answer 1

向该p元素添加类，例如

<div class="repeater-wrapper">
    <div style="border:1px solid black;padding:10px;">
        <p class="author">Author1</p>
        <div style="border:1px solid black;padding:10px;">
            <p>Role1</p>
        </div>
        <div style="border:1px solid black;padding:10px;">
            <p>Role2</p>
        </div>
    </div>
    <div style="border:1px solid black;padding:10px;">
        <p class="author">Author2</p>
        <div style="border:1px solid black;padding:10px;">
            <p>Role1</p>
        </div>
        <div style="border:1px solid black;padding:10px;">
            <p>Role2</p>
        </div>
    </div>
</div>

那你就可以做

jQuery('.repeater-wrapper').each(function(){
        $(this).find( ".author:eq(1)" ).css("color","pink");
    });

Answer 2

您可以使用与您使用的选择器相同的选择器，但是然后可以定义以下哪个选项。例如，如果每个作者都有Role1和Role2，这意味着您将拥有3

作为Author。

$($("div p")[3]).css("color","pink")

或者，您也可以循环到结果并仅更改所需的结果，例如：

$("div p").each(function(i){
    if($(this).html() == "Author2"){
        $(this).css("color","pink")
    }   
});

另一种解决方案是为每个作者分配一个类，并采用第二个。与此无关，他们是否有角色。

<h2>What will $("div span") select?</h2>

<h4>This div element has two descendants, p and span:</h4>

<div>
    <div style="border:1px solid black;padding:10px;">
        <p class="Author">Author1</p>
        <div style="border:1px solid black;padding:10px;">
            <p>Role1</p>
        </div>
        <div style="border:1px solid black;padding:10px;">
            <p>Role2</p>
        </div>
    </div>
    <div style="border:1px solid black;padding:10px;">
        <p class="Author">Author2</p>
        <div style="border:1px solid black;padding:10px;">
            <p>Role1</p>
        </div>
        <div style="border:1px solid black;padding:10px;">
            <p>Role2</p>
        </div>
    </div>
</div>

然后您就可以像这样更改颜色：

$($(".Author")[1]).css("color","pink");

Answer 3

$("p").parent("div").parent("div").eq(2).children("p:eq(0)").css("color", "pink")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>What will $("div span") select?</h2>

<h4>This div element has two descendants, p and span:</h4>

<div>
    <div style="border:1px solid black;padding:10px;">
        <p>Author1</p>
        <div style="border:1px solid black;padding:10px;">
            <p>Role1</p>
        </div>
        <div style="border:1px solid black;padding:10px;">
            <p>Role2</p>
        </div>
    </div>
    <div style="border:1px solid black;padding:10px;">
        <p>Author2</p>
        <div style="border:1px solid black;padding:10px;">
            <p>Role1</p>
        </div>
        <div style="border:1px solid black;padding:10px;">
            <p>Role2</p>
        </div>
    </div>
</div>

JQUERY嵌套元素选择器/元素

3 个答案: