Fatal编程技术网
  • javascript/
  • Javascript jQuery将子类添加到父类

Javascript jQuery将子类添加到父类

javascript jquery html css

Javascript jQuery将子类添加到父类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个看起来像： <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-

我有一个看起来像：

<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>
作为最终结果，我希望将mw uctop类添加到所有具有mw uctop类的子元素的li元素中。我该怎么做？

您可以这样做：

$('li > .mw-uctop').parent().addClass('mw-uctop');
您可以这样做：

$('li > .mw-uctop').parent().addClass('mw-uctop');
您可以尝试以下方法：

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

$('li').has('span.mw-uctop').addClass('mw-uctop');
您可以尝试以下方法：

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

$('li').has('span.mw-uctop').addClass('mw-uctop');
简单地尝试一下：

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

$('li').has('span.mw-uctop').addClass('mw-uctop');
简单地尝试一下：

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

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

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

尝试：

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

如果“子女”是指后代，则：

 $("li:has(.mw-uctop)").addClass('mw-uctop');
如果你真的是指孩子，试试：

 $("li:has(> .mw-uctop)").addClass('mw-uctop');
如果“子女”是指后代，则：

 $("li:has(.mw-uctop)").addClass('mw-uctop');
如果你真的是指孩子，试试：

 $("li:has(> .mw-uctop)").addClass('mw-uctop');
下面是一种更纯粹的面向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的方法：

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>");
}
编辑：哎呀，一秒钟
编辑：修复了HTML无效的问题。您不能单独拥有元素，它们必须位于或元素中。这是用于演示的页面的精简版本，它们位于内部。我添加了“如果这样更易于阅读…”HTML无效。您不能拥有单独的元素，它们必须位于或元素中。这是用于演示的页面的精简版本，它们位于内部。我添加了“如果它更易于阅读…”我的解决方案还考虑了.mw uctop子元素不是直接子元素，而是子代。这取决于您的需求。我的解决方案还考虑到.mw uctop子对象不是直接子对象，而是后代。这取决于您的需求。这与$'li'相同。具有'span.mw uctop'。addClass'mw-uctop'；除了双引号而不是单引号，而且它也有效…@ShoeMaker-是的，是的，同时发布了几个答案，它们似乎都是正确的，我们大多数人都知道我们的答案会有效，现在取决于你找出哪一个最适合你的需要，并接受其中一个答案。他们都投票了，我将选择稍后使用的任何一个。这与$'li'相同。具有'span.mw uctop'。addClass'mw-uctop'；除了双引号而不是单引号，而且它也有效…@ShoeMaker-是的，是的，同时发布了几个答案，它们似乎都是正确的，我们大多数人都知道我们的答案会有效，现在取决于你找出哪一个最适合你的需要，并接受其中一个答案。他们都投票了，我很快就会选择我最终使用的任何一个。$li:has.mw uctop.addClass'mw-uctop'；工作$李：has>.mw uctop.addClass'mw-uctop'；同样有效…$li:has.mw uctop.addClass'mw-uctop'；工作$李：has>.mw uctop.addClass'mw-uctop'；我也投了你的票。虽然它比其他的来得晚，而且我已经选了一个，但它很有效，而且非常不同我也投了你的票。虽然它比其他的来得晚，而且我已经选了一个，但它很有效，而且非常不同