使用Jquery，如何定位CSS选择器，除了一个类？

nwo49xxi 于 2024-01-07 发布在 jQuery

关注(0)|答案(1)|浏览(162)

下面是一个HTML的例子：

<div class="DataBox">
  <div class="diagram">
    <h3 class="dataNumber">
      Artificial intelligence is the intelligence 
        of machines or software, as opposed to the 
        intelligence of humans or animals.
      <span class="subDataTitle">
        AI augments human intelligence with rich analytics
      </span>
    </h3>
  </div>
</div>

字符串
我试图将.dataNumber下面的文本截短到一定的字符量，但我不想截短subDataTitle中的任何文本。
根据HTML的结构，我如何编写代码，以便只对dataNumber下面的文本应用截断逻辑，而不对subDataTitle中的文本应用截断逻辑。
这就是我如何使用:not来实现它，但它似乎不起作用：

$('.DataBox .diagram .dataNumber:not(.DataBox .diagram .dataNumber.subDataTitle)')
  .each(function (index, value) {
    var dataLength = $(this).text().length;
    if (dataLength > 8) {
      $(this).html($(this).html().substring(0, 12) + ' ...');
    }
  });

型

jquery

来源：https://stackoverflow.com/questions/77616921/with-the-use-of-jquery-how-to-target-css-selectors-with-the-exception-of-one-cl

1条答案

按热度按时间

f4t66c6m1#

:not()表达式的问题在于，您使用了.dataNumber.subDataTitle，它期望subDataTitle类与.dataNumber在同一个元素中以排除它。但您不想对.dataNumber本身进行操作，而是想选择它的后代。
但是，您不能直接在h3中操作文本，而不能将其与嵌套在其下面的span分开。选择器匹配整个h3元素。
您应该将每个子节点放在它们自己的<span>标记中，这样您就可以直接针对它们。然后您可以使用:not()排除.subDataTitle。
您也可以使用.text()或.html()的函数参数来代替.each()。

$('.DataBox .diagram .dataNumber >*:not(.subDataTitle)').text(function(index, text) {
  var dataLength = text.length;
  if (dataLength > 8) {
    return text.substring(0, 12) + ' ...';
  } else {
    return text;
  }
});

个字符
与其使用JavaScript实际更改文本，不如考虑使用Limit characters displayed in span这样的CSS解决方案

赞(0）回复(0）举报 2024-01-07

我来回答

使用Jquery，如何定位CSS选择器，除了一个类？

1条答案

相关问题

热门标签

最新问答