如果跨度包含cetain文本，则设置范围

Question

您能帮我吗，请如何：

如果跨度包含此文本" -1-"？？

跨度看起来像这样，您可以在文本" -1-"中看到触发边距：

<span class="topic_item">
    <a class='topic-completed' href='http://www.pplkonyv.hu/topic/1-1-1-sebesseg-es-gyorsulas/' title='1-1-1 Sebesség és gyorsulás'>
        <span>1-1-1 Sebesség és gyorsulás</span>
    </a>
</span>

非常感谢您提前

András

Answer 1

您可以尝试像这样的有条件的jQuery

$('.topic-completed > span :contains("-1-")').each(function () {
    $(this).css('margin',"30px");
});

Answer 2

纯JS方法;

使用过滤器，包括，地图，最接近祖先;

let allInnerSpans = document.getElementsByClassName("innerSpan");
let filteredSpans = Array.from(allInnerSpans).filter((span) => {
	return span.innerHTML.includes('-1-');
});
for(i=0;i<filteredSpans.length;i++) {
filteredSpans[i].closest(".topic_item").style.margin = '30px';
}

<span class="topic_item">
    <a class='topic-completed' href='http://www.pplkonyv.hu/topic/1-1-1-sebesseg-es-gyorsulas/' title='1-1-1 Sebesség és gyorsulás'>
        <span class="innerSpan">1-1-1 Sebesség és gyorsulás</span>
    </a>
</span>

Answer 3

您可以使用jQuery最接近并包含它来实现它。工作代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="topic_item">
    <a class='topic-completed' href='http://www.pplkonyv.hu/topic/1-1-1-sebesseg-es-gyorsulas/' title='1-1-1 Sebesség és gyorsulás'>
        <span>1-1-1 Sebesség és gyorsulás</span>
</a>
</span>
</div>
<div>
<span class="topic_item">
    <a class='topic-completed' href='http://www.pplkonyv.hu/topic/1-1-1-sebesseg-es-gyorsulas/' title='1-1-1 Sebesség és gyorsulás'>
        <span> Sebesség és gyorsulás</span>
</a>
</span>
</div>
<div>
<span class="topic_item">
    <a class='topic-completed' href='http://www.pplkonyv.hu/topic/1-1-1-sebesseg-es-gyorsulas/' title='1-1-1 Sebesség és gyorsulás'>
        <span>1-1-1 Sebesség és gyorsulás</span>
</a>
</span>
</div>

jQuery

$('.topic-completed > span:contains("-1-")').closest('.topic_item').css('margin', "30px");

Answer 4

纯JavaScript（Vanilla）方法：

var topics = document.querySelectorAll(".topic_item");
var searchingTag = '-1-';
for (var i = 0; i < topics.length; i++) {
  var topicCompleted = topics[i].childNodes[1];
  var yourText = topicCompleted.innerText;
  // indexOf approach
  if(yourText.indexOf(searchingTag) !== -1){
      topicCompleted.style = 'margin-left: 30px';
  }
 }
 //ES6 approach
 // if(topicCompleted.innerText.includes('-1-')) { /*...*/ }

 //RegExp approach
 // var string = topicCompleted.innerText,
 // expr = /-1-/;
 // if(expr.test(string)) { /* ...*/ }

jsfiddle在这里：https：//jsbin.com/jukiyuzoli/edit?html，js，output

Answer 5

jQuery似乎是最简单的：

$( "a.topic-notcompleted:contains('-1-')" ).css( "margin-left", "21px" );