Question

单击按钮我试图找到包含字符串的最近的类。 HTML看起来像：

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

我的JavaScript是

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

我进入控制台的所有内容都是：

Description undefined

Answer 1

假设它真的是你想要的子字符串检查（不是类选择器），你不需要contains(...)位，这是*=的含义：

＆＃13;

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

＆＃13;

<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.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

＆＃13;

如果字符串可能包含不符合CSS identifier定义的引号或其他字符（或者您只是想谨慎），请在值.closest('div[class*="feature I am"]')周围加上引号

在您的示例中，feature是一个类，因此您想要使用类选择器（.closest("div.feature")）。

Answer 2

只需使用.closest()的班级选择器，无需使用:contains()

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

Answer 3

将“包含”替换为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.com/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>

Answer 4

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

选择器对于通配符应该是这样的。

Answer 5

将字符串保留在双引号

中

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

JavaScript如何查找包含字符串的最接近的类

5 个答案: