查找相同的文本,并使用jQuery将类添加到容器中

时间:2014-10-09 11:18:18

标签: jquery css match case-sensitive

我正在尝试查找h2个文本是否与h1文本匹配。另外不区分大小写。如果找到匹配项,则为容器Product-div添加类。

<div id="PageHeader">
  <h1>Same text</h1>
</div>

<div class="Product">
  <h2 class="ProductName">Product name 1</h2>
</div>

<div class="Product">
  <h2 class="ProductName">Same text</h2>
</div>

<div class="Product">
  <h2 class="ProductName">Product name 2</h2>
</div>

5 个答案:

答案 0 :(得分:2)

您可以尝试如下。阅读h1文本并将其设置为低位(正如您所说的文本比较不区分大小写)。迭代所有h2并将其文本与h1进行比较,如果匹配则将类添加到其父div

$(function(){
  var h1Text = $('#PageHeader h1').text().toLowerCase();
    $('.Product .ProductName').each(function(){
       if($(this).text().toLowerCase()==h1Text)
           $(this).closest('.Product').addClass('containerProd');
    });
});

DEMO

答案 1 :(得分:0)

尝试:

var text=$("#PageHeader h1").text();

$('.ProductName:contains("'+ text +'")').parent().addClass('Product-div');

我相信代码是由函数自我解释的

DEMO

对于区分大小写,请添加此查询,将函数contains()转换为区分大小写:

//Contains to case-sensitive
Query.expr[':'].contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

var text = $("#PageHeader h1").text();

$('.ProductName:Contains("' + text + '")').parent().addClass('Product-div');

DEMO2

答案 2 :(得分:0)

试试这个,

var h1Text = $("h1").text();
$.each($("h2"),function(key,val){
  if( $(val).text().toLowerCase() == h1Text.toLowerCase() )
  {
      $($(this).parent()[0]).addClass("Product-div");
  }
});

答案 3 :(得分:0)

试试这个:

var header=$('#PageHeader h1').text();
$('.Product ProductName').each(function() {
  if( $( this ).text()==header)
  {
     $( this ).parent('.product').addClass( "your class" );
  }
});

答案 4 :(得分:0)

试试这个:

var text = $("#PageHeader h1").text();
$('.Product h2').filter(function(){
    return this.innerHTML.toLowerCase() === text.toLowerCase();
}).parent().addClass('Product-div');

<强> Working Fiddle