on click of a button I am trying to find the closest class containing a string. The HTML looks like:

<div class="feature I am the best">
  <div class="some style"> 
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>

and my JavaScript is

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest('div[class*=:contains(feature)]').attr('class');
  console.log("Description "+description);
});

All I am getting in console is:

Description undefined

on click of a button I am trying to find the closest class containing a string. The HTML looks like:

<div class="feature I am the best">
  <div class="some style"> 
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>

and my JavaScript is

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest('div[class*=:contains(feature)]').attr('class');
  console.log("Description "+description);
});

All I am getting in console is:

Description undefined

• javascript
• jquery
• html
• class
• closest

• var description = $(this).closest('div[class*=:contains("feature")]').attr('class'); – John Willson Commented Mar 22, 2018 at 8:05
• 1 keep the string inside the double quotes – John Willson Commented Mar 22, 2018 at 8:05

5 Answers 5

Assuming it's really a substring check you want (not a class selector), you don't want the contains(...) bit, that's what *= means:

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest('div[class*=feature]').attr('class');
  // Change here -------------------------------^^^^^^^
  console.log("Description "+description);
});

<div class="feature I am the best">
  <div class="some style"> 
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If the string may contain quotes or other characters that don't fit the definition of a CSS identifier (or if you just want to be cautious), put quotes around the value: .closest('div[class*="feature I am"]')

In your example, though, feature is a class so you'd want to use a class selector (.closest("div.feature")).

Just use class selector with .closest() no need to use :contains()

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest('.feature').attr('class');
  console.log("Description "+description);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature I am the best">
  <div class="some style"> 
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>

Replace contains with class*="feature"

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest('div[class*="feature"]').attr('class');
  console.log("Description " + description);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature I am the best">
  <div class="some style">
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>

$('.clickme').on('mouseup', function(event) {
  var description = $(this).closest("[class^=feature]").prop('class');
  console.log("Description "+description);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="feature I am the best">
  <div class="some style"> 
    <div class="new style">
      <button class="clickme">Click me </button>
    </div>
  </div>
</div>

the selector should be like this for wildcard.

keep the string inside the double quotes

var description = $(this).closest('div[class*=:contains("feature")]').attr('class');