admin管理员组

文章数量:1428562

I have / that looks like:

<head><style>
    span.mw-uctop {
        font-weight: bold;
    }
    li.mw-uctop {
        font-size: 8px;
        text-decoration: italic;
    }
</style><script>
    $("li").contents("span.mw-uctop").addClass("mw-uctop");
</script></head><body>
    <ul>
        <li class="">Text blurb 1 <span class="mw-uctop">(top)</span> ‎</li>
        <li class="">Text blurb 2‎</li>
        <li class="">Text blurb 3 <span class="mw-uctop">(top)</span> ‎</li>
        <li class="">Text blurb 4</li>
        <li class="">Text blurb 5</li>
        <li class="">Text blurb 6</li>
        <li class="">Text blurb 7 <span class="mw-uctop">(top)</span> ‎</li>
        <li class="">Text blurb 8 <span class="mw-uctop">(top)</span> ‎</li>
    </ul>
</body>

What I am looking for as an end result is I want to add the class "mw-uctop" to all of the "li" elements that have a child with the "mw-uctop" class. How do I do this?

I have http://jsfiddle/ShoeMaker/6EEjs/1/ that looks like:

<head><style>
    span.mw-uctop {
        font-weight: bold;
    }
    li.mw-uctop {
        font-size: 8px;
        text-decoration: italic;
    }
</style><script>
    $("li").contents("span.mw-uctop").addClass("mw-uctop");
</script></head><body>
    <ul>
        <li class="">Text blurb 1 <span class="mw-uctop">(top)</span> ‎</li>
        <li class="">Text blurb 2‎</li>
        <li class="">Text blurb 3 <span class="mw-uctop">(top)</span> ‎</li>
        <li class="">Text blurb 4</li>
        <li class="">Text blurb 5</li>
        <li class="">Text blurb 6</li>
        <li class="">Text blurb 7 <span class="mw-uctop">(top)</span> ‎</li>
        <li class="">Text blurb 8 <span class="mw-uctop">(top)</span> ‎</li>
    </ul>
</body>

What I am looking for as an end result is I want to add the class "mw-uctop" to all of the "li" elements that have a child with the "mw-uctop" class. How do I do this?

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Mar 19, 2013 at 23:16 ShoeMaker asked Mar 19, 2013 at 22:39 ShoeMakerShoeMaker 8338 silver badges32 bronze badges 3
  • 3 Your HTML is invalid. You cannot have <li> elements on their own, they must be within a <ul> or <ol> element. – jmoerdyk Commented Mar 19, 2013 at 22:42
  • That is a chopped down version of the page for demonstration, they are inside <ul></ul>. – ShoeMaker Commented Mar 19, 2013 at 23:06
  • I added the <ul></ul> if it makes it easier to read... – ShoeMaker Commented Mar 19, 2013 at 23:38
Add a ment  | 

6 Answers 6

Reset to default 2

You can try this:

$('.mw-uctop').closest('li').addClass('mw-uctop');

You can do it like this:

$('li > .mw-uctop').parent().addClass('mw-uctop');

If by "child" you mean "descendant," then:

 $("li:has(.mw-uctop)").addClass('mw-uctop');

If you really do mean child, try:

 $("li:has(> .mw-uctop)").addClass('mw-uctop');

Simply try this:

$('li').has('span.mw-uctop').addClass('mw-uctop');

Try has() :

$("li").has("span.mw-uctop").addClass("mw-uctop");

Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

Here is a more pure javascript oriented way to do it:

var query = document.querySelectorAll('li > .mw-uctop');
//there are other workarounds for query selector for older browsers (ie6/7)
for(i=0;i<=query.length;i++){
query[i].parentNode.className+= 'mw-uctop';
// For Testing: document.write(query[i].parentNode.className+"<br>");
}

Edit: oops one second Edit: fixed

本文标签： javascriptjQuery addClass of child to parentStack Overflow

版权声明：本文标题：javascript - jQuery addClass of child to parent - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745526659a2661866.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。