jQuery-выбор элемента с определенным html
Я пытаюсь выбрать div, который имеет определенный html. Посмотрите на мой пример:
$("#clickMe").click(function(){
$("div:contains('heinrich')").css("background-color", "limegreen")
});
.normal {
width: 100px;
height: 100px;
display: inline-block;
}
.red {
background-color: red;
border: 1px solid black;
}
.blue {
background-color: blue;
border: 1px solid black;
}
.yellow {
background-color: yellow;
border: 1px solid black;
}
#masterdiv {
border: 10px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="masterdiv">
My favorite frends are:
<div class="red normal" id="div1">
hans
</div>
<div class="blue normal" id="div2">
franz
</div>
<div class="yellow normal" id="div3">
heinrich
</div>
</div>
<button id="clickMe">
Clicking me should make only heinrichs div limegreen
</button>
JsFiddle: https://jsfiddle.net/fj1brnv8/2/
Однако цвет родительского div также изменяется. Есть ли способ только выбрать сам элемент, мне не разрешается использовать ID.
7 ответов:
Лучше упомянуть
className
в селекторе$("div .normal:contains('heinrich')")
$("#clickMe").click(function(){ $("div .normal:contains('heinrich')").css("background-color", "limegreen") });
.normal { width: 100px; height: 100px; display: inline-block; } .red { background-color: red; border: 1px solid black; } .blue { background-color: blue; border: 1px solid black; } .yellow { background-color: yellow; border: 1px solid black; } #masterdiv { border: 10px solid gray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="masterdiv"> My favorite frends are: <div class="red normal" id="div1"> hans </div> <div class="blue normal" id="div2"> franz </div> <div class="yellow normal" id="div3"> heinrich </div> </div> <button id="clickMe"> Clicking me should make only heinrichs div limegreen </button>
Просто измените корневой селектор.
Обновить
Выберите каждый
div
и используйте методfilter .Клонируйте
div
, который вы фильтруете, выберите все дочерние элементы (вложенные divs), удалите их, затем "вернитесь" к родительскомуcloned div
и извлеките текст.Имея текст, сравните его содержимое с текстом, который вы ищете.
$("#clickMe").click(function(){ $("div").filter(function(idx, val) { return /heinrich/gi.test($(this).clone().children().remove().end().text()); }).css("background-color", "limegreen") });
.normal { width: 100px; height: 100px; display: inline-block; } .red { background-color: red; border: 1px solid black; } .blue { background-color: blue; border: 1px solid black; } .yellow { background-color: yellow; border: 1px solid black; } #masterdiv { border: 10px solid gray; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="masterdiv"> My favorite frends are: <div class="red normal" id="div1"> hans </div> <div class="blue normal" id="div2"> franz </div> <div class="yellow normal" id="div3"> heinrich </div> </div> <button id="clickMe"> Clicking me should make only heinrichs div limegreen </button>
Это должно сделать
$("#clickMe").click(function(){ $("#masterdiv div:contains('heinrich')").css("background-color", "limegreen") });
Поскольку вы не хотели использовать ID, я могу предложить вам попробовать это.
$('div > div:contains(heinrich)').css("background-color", "limegreen")
Рабочая Скрипка: https://jsfiddle.net/g50cfqzw/