javascript - jQuery addClass 的孩子到父母

Question

我有http://jsfiddle.net/ShoeMaker/6EEjs/1/，看起来像：

<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> ‎&lt;/li>
        <li class="">Text blurb 2‎&lt;/li>
        <li class="">Text blurb 3 <span class="mw-uctop">(top)</span> ‎&lt;/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> ‎&lt;/li>
        <li class="">Text blurb 8 <span class="mw-uctop">(top)</span> ‎&lt;/li>
    </ul>
</body>

我正在寻找的最终结果是我想将类“mw-uctop”添加到所有具有“mw-uctop”类的子元素的“li”元素中。我该怎么做呢？

score 2 · Accepted Answer

2

你可以这样做：

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

于 2013-03-19T22:41:37.123 回答

score 2 · Accepted Answer

2

你可以试试这个：

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

于 2013-03-19T22:42:28.020 回答

score 2 · Accepted Answer

如果“孩子”是指“后代”，那么：

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

如果您真的是孩子，请尝试：

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

score 1 · Accepted Answer

1

试试这个：

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

于 2013-03-19T22:43:34.870 回答

score 1 · Accepted Answer

尝试has()：

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

将匹配元素集减少为具有与选择器或 DOM 元素匹配的后代的元素。

score 1 · Accepted Answer

这是一种更纯粹的面向javascript的方法：

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

编辑：哎呀一秒钟编辑：固定

javascript - jQuery addClass 的孩子到父母

6 回答 6

Related

Reference