Выберите элемент, если содержит текст

Question

Я не могу заставить это работать, и я не могу найти какой-либо подобный вопрос, который делает то же самое, что я хочу.

У меня есть таблица со строками, как это:

<div class="gui-table"> 
      <table> 
      <tr> 
       <td></td> 
       <td></td> 
       <td></td> 
       </tr> 
       <tr> 
       <td></td> 
       <td><p class="customfields">Size</p></td> 
       <td></td> 
       </tr> 
      //etc... 

Я хочу, чтобы проверить, все вторые клетки имеют текст «размер» в нем! Если это так, то скройте третий td.

Так что я думал, что будет работать так:

$('.gui-table tr').each(function(){ 

    if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) { 
    $(this).css('visibillity', 'hidden'); 
    } 
}); 

Это не работает! Кто-нибудь видит, что не так с этим?

Answer 1

Если вы хотите, чтобы скрыть третий столбец, когда есть слово «размер» во втором вы можете сделать это таким образом:

$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden'); 

Вот jsfiddle: http://jsfiddle.net/0qczvak5/

объяснение:

Выберите все элементы с именем класса .gui-table выберите все вторые td с с td:nth-child(2), фильтруйте их с помощью :contains("Size"). Теперь у вас есть все второе td s со словом «Размер» и с .next() вы получите следующую ячейку (третий), и вы спрячете ее с .css('visibility', 'hidden').

Answer 2

Вобще:

$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden'); 

Fiddle: http://jsfiddle.net/cfmrngcc/2/

Answer 3

Предполагая, что я правильно понимаю ваш вопрос следующий должен сделать это:

$('.gui-table p.customfields:contains("Size")').parent().next().hide();

td { border: 1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gui-table"> 
 
    <table> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td>Shown</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td><p class="customfields">Size</p></td> 
 
     <td>Hidden</td> 
 
    </tr> 
 
    </table> 
 
    </div>

Это будет скрыть следующий ta через ячейку таблицы, содержащую тэг p с текстом Size.

Он работает путем нахождения P теги containing размер внутри графического интерфейса стола - $('.gui-table p.customfields:contains("Size")')

Затем с помощью .parent(), чтобы выбрать его родительской ячейки таблицы.

И, наконец, .next() и .hide(), чтобы выбрать следующую ячейку таблицы и скрыть ее.

Answer 4

$(".gui-table tr td:nth-child(2)").each(
    function (index,tag){ 
     if ($(tag).find("p").text() == "Size") 
     $(tag).css('visibility', 'hidden'); 
    } 
) 

Это будет работать.

Answer 5

Я ударил по этому вопросу и придумал этот JSFiddle, который должен вас снова забрать.Существенная функция очень похожа на вы начали, но модифицирована следующим образом:

function doItNow(e) 
    { 
     $('.gui-table tr').each(function() 
     { 
      $('td:nth-child(2) .customfields:contains("Size")').each(function() 
      { 
       $(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden'); 
      }); 
     }); 
    } 

Обратите внимание, что внутренний каждый() проходит элемент абзаца, а не элемент ячейки. Поэтому я прошел цепочку родителей(), пока не найду строку и не спрячу третьего ребенка. Вы могли бы кодировать это без внутреннего, но я слишком ленив, чтобы быть таким сложным!