Селектор / элемент вложенного элемента JQUERY
Мне нужен только автор 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>Это живой элемент (динамический)
Автор2 - это фиксированный текст или его можно изменить?
Автор 2 - это имя настоящего автора. Это живой элемент (динамический), я добавил кнопку, при нажатии на нее в форму добавляются новые авторы.
Ответы 3
Добавьте класс к этому элементу 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");
});
Но я не могу, так как это живой элемент в форме, и это нужно сделать с помощью пути jquery (считая второй элемент в списке авторов)
Конечно, спасибо. Но что, если у меня нет класса .author? Это вложенный шаблон (форма), который снова используется для спонсоров, участников, связанных публикаций и т. д.?
@ наб. Проверьте этот обновленный ответ. Вы можете добавить класс к основному div, который повторяется. Как я добавил repeater-wrapper
var $ divs = $ root.find ('p'). not ($ root.find ('p p')) // Я пытаюсь добиться чего-то подобного с помощью концепции xpath, не могли бы вы помочь? $ divs [2] .css ("цвет", "розовый")
@nab Но вы можете просто применить класс и сделать что-то проще, вместо того, чтобы усложнять
Вы можете использовать тот же селектор, который вы используете, но затем вы можете определить, что из следующего вы хотите обработать. Например, если у каждого автора будут 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");
var $ divs = $ root.find ('p'). not ($ root.find ('p p')) // Я пытаюсь добиться чего-то подобного с помощью концепции xpath, не могли бы вы помочь? $ divs [2] .css ("цвет", "розовый")
$("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>var $ divs = $ root.find ('p'). not ($ root.find ('p p')) // Я пытаюсь добиться чего-то подобного с помощью концепции xpath, не могли бы вы помочь? $ divs [2] .css ("цвет", "розовый")
$("div:has(div>p):eq(2)").children("p:eq(0)") выберет Author2
Этот HTML динамический? Почему вы не можете использовать идентификатор или класс для Author2?