Форум

Yan.Total · #1 (**permalink**) 07.10.2013, 00:49

Добрый вечер!

На странице есть 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

рони · #2 (**permalink**) 07.10.2013, 01:29

Сообщение от Yan.Total

то добавляем аттрибут инпуту

какой атрибут?

рони · #3 (**permalink**) 07.10.2013, 01:42

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>

ruslan_mart · #4 (**permalink**) 07.10.2013, 08:36

рони,

Почему не?

$('.item span.title:contains("Первое")').each(function() {
  $(this).next().css({border: '5px red solid'});
});

Или:

$('.item span.title:contains("Первое")').next().css({border: '5px red solid'});

Yan.Total · #5 (**permalink**) 07.10.2013, 14:10

а как можно без использования 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>

mi.rafaylik · #6 (**permalink**) 07.10.2013, 14:52

Yan.Total, если нужно подсветить input, который находится в этом же .item, то так:

$('.item span.title:contains("Первое")').each(function(){
  $(this).parent('.item').children('input').css({border: '5px red solid'});
});

рони · #7 (**permalink**) 07.10.2013, 15:01

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'});
});

Yan.Total · #8 (**permalink**) 07.10.2013, 15:17

mi.rafaylik, рони, спасибо! Получилось

Форум

Справочник

Discord чат

Курсы javascript