如果包含特定文本，请设置范围边距

Question

你能帮我吗，请问如何：

如果跨度包含此文本“-1-”，则为每个class =“topic_item”范围设置30px的边距？

跨度看起来像这样，你可以在文本里面看到“-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>

非常感谢你提前

安德拉什

Answer 1

您可以像这样尝试jquery for conditional give margin

$('.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（香草）方法：

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" );