Добавить элементу аттрибут, если другой элемент содержит текст
Добрый вечер! :)
На странице есть div'ы с одинаковыми названи. Вот примерная разметка: <div class="item"> <span class="title">Первое значение</span> <input type="text"> </div> <div class="item"> <span class="title">Второе значение</span> <input type="text"> </div> <div class="item"> <span class="title">Третье значение</span> <input type="text"> </div> И следующая задача: если в тайтле (.item span.title) содержится определенный текст (слово "Первое"), то добавляем аттрибут инпуту (.item input). Ну и такое условие выполняем для всех блоков div.item :) |
Цитата:
|
Yan.Total,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="item">
<span class="title">Первое значение</span>
<input type="text">
</div>
<div class="item">
<span class="title">Второе значение</span>
<input type="text">
</div>
<div class="item">
<span class="title">Третье значение</span>
<input type="text">
</div>
<div class="item">
<span class="title">Первое значение</span>
<input type="text">
</div>
<script>
$('.item span.title:contains("Первое")').each(function(indx, element){
$(element).next().css({border : '5px red solid'});
});
</script>
</body>
</html>
|
рони,
Почему не?
$('.item span.title:contains("Первое")').each(function() {
$(this).next().css({border: '5px red solid'});
});
Или:
$('.item span.title:contains("Первое")').next().css({border: '5px red solid'});
|
а как можно без использования next()? т.е. я написал примерную структуру, на самом деле она немного сложнее.
Если так, то выделяется всё:
$('.el-good p.title:contains("заправка")').each(function(indx, element){
$('.el-good .count-add').css({border : '5px red solid'});
});
Вот листинг:
<tbody>
<tr class="fl">
<td colspan="4"></td>
<td>Кол-во сдаваемых баллонов</td>
<td>Доп. сумма за баллоны</td>
</tr>
<tr class="el-good" data-id="001" data-cost="1358" data-count="1" data-addcost="510" data-addcount="0">
<td>
<p class="title"><span data-toggle="tooltip" class="action remove-el remove-red" data-original-title="Убрать товар"></span> Газовый баллон 12 л (заправленный)</p>
<div class="about">
<img src="img/card/b1.jpg" alt="" width="50" class="pull-left">
<ul class="line-list">
<li><span>Вес газа 3 кг</span></li>
<li><span>Масса пустого баллона — 3,1 кг</span></li>
<li><span>Габариты — 220х290 мм</span></li>
</ul>
</div>
</td>
<td class="cost">1 358 руб</td>
<td class="count"><input name="count[001]" type="text" autocomplete="off" value="1"></td>
<td class="summ">1 358 руб</td>
<td class="count-add centered" style="border: 5px solid red;"><input name="countadd[001]" type="text" autocomplete="off" value="0"></td>
<td class="add-cost centered">510 руб</td>
</tr>
<tr class="el-good" data-id="002" data-cost="2648" data-count="2" data-addcost="980" data-addcount="2">
<td>
<p class="title"><span data-toggle="tooltip" class="action remove-el remove-red" data-original-title="Убрать товар"></span> Газовый баллон 50 л (заправленный)</p>
<div class="about">
<img src="img/card/b1.jpg" alt="" width="50" class="pull-left">
<ul class="line-list">
<li><span>Вес газа 3 кг</span></li>
<li><span>Масса пустого баллона — 3,1 кг</span></li>
<li><span>Габариты — 220х290 мм</span></li>
</ul>
</div>
</td>
<td class="cost">2 648 руб</td>
<td class="count"><input name="count[002]" type="text" autocomplete="off" value="2"></td>
<td class="summ">5 296 руб</td>
<td class="count-add centered" style="border: 5px solid red;"><input name="countadd[002]" autocomplete="off" type="text" value="2"></td>
<td class="add-cost centered"> — </td>
</tr>
<tr class="el-good" data-id="002" data-cost="2648" data-count="2" data-addcost="980" data-addcount="2">
<td>
<p class="title"><span data-toggle="tooltip" class="action remove-el remove-red" data-original-title="Убрать товар"></span> Газовый баллон 50 л (заправка баллона)</p>
<div class="about">
<img src="img/card/b1.jpg" alt="" width="50" class="pull-left">
<ul class="line-list">
<li><span>Вес газа 3 кг</span></li>
<li><span>Масса пустого баллона — 3,1 кг</span></li>
<li><span>Габариты — 220х290 мм</span></li>
</ul>
</div>
</td>
<td class="cost">2 648 руб</td>
<td class="count"><input name="count[002]" type="text" autocomplete="off" value="2"></td>
<td class="summ">5 296 руб</td>
<td class="count-add centered" style="border: 5px solid red;"><input name="countadd[002]" autocomplete="off" type="text" value="2"></td>
<td class="add-cost centered"> — </td>
</tr>
</tbody>
|
Yan.Total, если нужно подсветить input, который находится в этом же .item, то так:
$('.item span.title:contains("Первое")').each(function(){
$(this).parent('.item').children('input').css({border: '5px red solid'});
});
|
Yan.Total,
$('tr.el-good:contains("заправка")').each(function(indx, element){
$('.count-add', element).css({border : '5px #33FF00 solid'});
});
или если инпут в этом классе
$('tr.el-good:contains("заправка")').each(function(indx, element){
$('.count-add input', element).css({border : '5px #33FF00 solid'});
});
|
mi.rafaylik, рони, спасибо! Получилось :)
|
| Часовой пояс GMT +3, время: 04:07. |