Set Rand der Spanne, wenn es einem cetain Text enthält

Question

könnten Sie mir bitte helfen, wie Sie:

einen 30px-Marge auf jeden class = "topic_item" span gesetzt, wenn die Spanne diesen Text enthält "-1-" ?

Die Spannweite wie folgt aussieht, können Sie in den Text "-1-", um die Marge auslösen soll:

<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> 

Vielen Dank im Voraus

András

Answer 1

können Sie versuchen jquery für bedingte geben Marge wie diese

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

Answer 2

pure js Ansatz;

Filter verwenden, enthält, Karte, nächstgelegener Vorgänger;

let allInnerSpans = document.getElementsByClassName("innerSpan"); 
 

 
let filteredSpans = Array.from(allInnerSpans).filter((span) => { 
 
\t 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

Sie können es mit acheive jquery am nächsten und contain.Here ist der Arbeitscode

<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

Ein reines Javascript (Vanilla) Ansatz :

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 hier: https://jsbin.com/jukiyuzoli/edit?html,js,output

Answer 5

jQuery schien die einfachste:

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