Question

根据我的上一个问题here，我有以下代码：

var $categories = $('.menu-item-category');
$categories.each(function() {
  var $this = jQuery(this);
  if ($this.text().trim() == 'Offers') {
    $('.m3-item').addClass('menu-offers');
  }
});

.menu-3-cat {
  margin-bottom: 35px;
  overflow: hidden;
  margin-right: 5px;
  padding: 5px
}

.menu-item-category {
  padding: 5px;
  width: 100%;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  margin-bottom: 5px;
}

.m3-item {
  width: 48%;
  float: left;
}

.menu-offers {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-3-cat">
  <div class="menu-item-category">Offers</div>
  <div class="m3-item">Item 1</div>
  <div class="m3-item">Item 2</div>
  <div class="m3-item">Item 3</div>
  <div class="m3-item">Item 4</div>
</div>

<div class="menu-3-cat">
  <div class="menu-item-category">Smartphones</div>
  <div class="m3-item">Phone 1</div>
  <div class="m3-item">Phone 2</div>
  <div class="m3-item">Phone 3</div>
  <div class="m3-item">Phone 4</div>
</div>

我想在页面加载时检查类“ menu-item-category”的元素是否包含单词“ Offers”。如果是，那么我想向具有“ m3-item”类且仅在第1块内部的元素添加新类“ menu-offers”。

我尝试了以下代码，但由于它甚至向属于BLOCK 2的元素也添加了新类，因此无法正常工作。

Fiddle HERE

Answer 1

就目前而言，无论$('.m3-item')元素中包含什么，您都可以使用.m3-item收集整个DOM中的{em> all 个$this元素。显然，您需要用它来限制搜索。

您可以将$this值用作父节点作为上下文的起点：

var $thisParent = $this.parent();
$('.m3-item', $thisParent).addClass('menu-offers');

另一种方法是采用$().nextAll()方法（docs）来获取给定类的所有已找到项目的同级兄弟：

var $categories = $('.menu-item-category');
$categories.each(function() {
  var $this = jQuery(this);
  if ($this.text().trim() == 'Offers') {
    $this.nextAll('.m3-item').addClass('menu-offers');
  }
});

但是事实上，如果您只想检查Offers子字符串，甚至不需要所有这些代码和东西-看看:contains（docs的威力）伪选择器！

$('.menu-item-category:contains(Offers) ~ .m3-item').addClass('menu-offers');

.menu-3-cat {
  margin-bottom: 35px;
  overflow: hidden;
  margin-right: 5px;
  padding: 5px
}

.menu-item-category {
  padding: 5px;
  width: 100%;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  margin-bottom: 5px;
}

.m3-item {
  width: 48%;
  float: left;
}

.menu-offers {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-3-cat">
  <div class="menu-item-category">Offers</div>
  <div class="m3-item">Item 1</div>
  <div class="m3-item">Item 2</div>
  <div class="m3-item">Item 3</div>
  <div class="m3-item">Item 4</div>
</div>

<div class="menu-3-cat">
  <div class="menu-item-category">Smartphones</div>
  <div class="m3-item">Phone 1</div>
  <div class="m3-item">Phone 2</div>
  <div class="m3-item">Phone 3</div>
  <div class="m3-item">Phone 4</div>
</div>

Answer 2

您只需要使用给定的HTML结构编写以下jQuery代码：

var menuItems = $(".menu-item-category");
menuItems.each(function(i){
    if($(this).text().indexOf("Offers") >= 0){
      $(this).siblings(".m3-item").addClass("menu-offers");
      alert(i + ":" + $(this));
  }
})

;

这是代码的有效示例：

var menuItems = $(".menu-item-category");
menuItems.each(function(i){
	if($(this).text().indexOf("Offers") >= 0){
  	$(this).siblings(".m3-item").addClass("menu-offers");
  	alert(i + ":" + $(this));
  }
});

.menu-offers{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- BLOCK 1 / START -->    
<div>
<div class="menu-3-cat">
<div class="menu-item-category">Offers</div>
<div class="m3-item">Item 1</div>
<div class="m3-item">Item 2</div>
<div class="m3-item">Item 3</div>
<div class="m3-item">Item 4</div>
</div>
</div>
<!-- BLOCK 1 / END -->   


<!-- BLOCK 2 / START -->  
<div>
<div class="menu-3-cat">
<div class="menu-item-category">Smartphones</div>
<div class="m3-item">Phone 1</div>
<div class="m3-item">Phone 2</div>
<div class="m3-item">Phone 3</div>
<div class="m3-item">Phone 4</div>
</div>
</div>

Here是小提琴的链接。

希望这会有所帮助。

更新：我已根据您的要求更新了代码，请检查该代码是否如您在问题中提到的那样有效。我在要添加的类中添加了一个额外的CSS，以便可以清楚地将类添加到何处。

Answer 3

您可以在Jquery中使用此Javascript方法：

Select  order_no, rate, 'jan' as month, jan as unit
from tbl
where jan is not null
union all
Select  order_no, rate, 'feb' as month, feb as unit
from tbl
where feb is not null
union all
Select  order_no, rate, 'mar' as month, mar as unit
from tbl
where mar is not null
order by order_no

检查元素是否包含特定文本，并向其他元素添加新类

3 个答案: