JQUERY селектор вложенных элементов / элемент - PullRequest
Новая
       9

JQUERY селектор вложенных элементов / элемент

0 голосов
/ 26 сентября 2018

Я хочу, чтобы только автор 2 в розовом, как мне добиться этого с помощью .not ($ element)?

т.е. я хочу, чтобы только второй верхний элемент (author2) был розовым, оставляя позади первый верхний элемент(author1) в списке.Здесь мы можем иметь несколько таких списков для различных типов.Для каждого типа я хочу, чтобы автор 2 в розовом

Я не хотел, чтобы цвета текста ROLE менялись 

<!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>

Ответы [ 3 ]

0 голосов
/ 26 сентября 2018

Вы можете использовать тот же селектор, который вы используете, но затем вы можете определить, какой из следующих пунктов хотите обработать.Например, если у каждого автора будут Role1 и Role2, это означает, что у вас будет 3

для автора. 

$($("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");
0 голосов
/ 26 сентября 2018 

$("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>
0 голосов
/ 26 сентября 2018

Добавить класс к этому 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");
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...