Question

嗨，我似乎对一些jQuery代码有点问题，但我似乎无法让它工作，
我想根据以1.6开头的内容添加CSS样式：

<p><strong>1.6.1</strong> this is some content</p>

jQuery如下：

$('p strong:starts-with(1.6)').css('background-color', '#3c763d');

基于代码，它应该仅设置'强'元素的样式。

Answer 1

你没有做错什么...... 只是需要构建自定义选择器扩展程序：

＆＃13;

jQuery.extend(jQuery.expr[':'], { 
  "starts-with" : function(el, i, p, n) {    
     // return el.textContent.startsWith(p[3]); // ES6
     return (el.textContent || el.innerText).indexOf(p[3]) === 0;
  }
});


$('p strong:starts-with(1.6)').css('background-color', '#3c763d');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>1.6.1</strong> this is some content</p>

＆＃13;

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/indexof https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

虽然您已经有了:contains选择器，但是好吧，它的与的开头不一样，但在案例中很有用

$('p strong:contains(1.6)').css('background-color', '#3c763d');

Sizzle selector engine已经习惯了野外各种浏览器

"contains": markFunction(function( text ) {
  text = text.replace( runescape, funescape );
  return function( elem ) {
    return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
  };
}),

Answer 2

嗯，没有用于文本的jQuery starts-with 选择器。您可以在 .css() - 使用函数作为参数进行检查，并使用regEx，仅在匹配时设置background-color。

$('p strong').css('background-color', function() {

  if ($(this).text().trim().match("^1.6")) {
    return '#3c763d';
  }
});

检查以下代码段

＆＃13;

$('p strong').css('background-color', function() {

  if ($(this).text().trim().match("^1.6")) {
    return '#3c763d';
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>1.6.0</strong> this is some content</p>
<p><strong>1.6.1</strong> this is some content</p>
<p><strong>2.1.6</strong> this is some content</p>
<p><strong>6.1.6</strong> this is some content</p>
<p><strong>1.6.9</strong> this is some content</p>

＆＃13;

内容开始的目标元素 -

2 个答案: