JavaScript - 向子级

Question

body#page-mod-quiz-attempt
|- div#page-content
  |- div.col.md-3

我需要更改div.col.md-3添加col-sm-12和col-xs-12

我使用 js ：

var Quiz = document.getElementById('page-mod-quiz-attempt');
var Contenz = Quiz.document.getElementById('page-content');
Contenz.getElementsByClassName("col-md-3").className += ' col-xs-12 col-sm-12';

和 jQuery ：

$(document).ready(function() {
  $('#page-mod-quiz-attempt #page-content div.col-md-3')
    .removeClass()
    .addClass('col-md-3 col-xs-12 col-sm-12');
});

但失败了。也许我错过了什么。 如果可能的话，我更喜欢纯粹的 JavaScript 路线。

Answer 1

您的html定义使用div.col.md-3，但您的js使用col-md-3，因此首先检查拼写错误。

接下来，var Contenz = Quiz.document.getElementById('page-content');将返回错误Uncaught TypeError: Cannot read property 'getElementById' of undefined，因此如果不需要var Quiz = document.getElementById('page-mod-quiz-attempt')。只需使用var Contenz = document.getElementById('page-content');

即可

然后，Contenz.getElementsByClassName('col-md-3');返回一个包含该类的数组。所以Contenz.getElementsByClassName('col-md-3').className;未定义。相反，Contenz.getElementsByClassName('col-md-3')[0]将是使用该类的html。

最后你有这个： var Contenz = document.getElementById('page-content'); Contenz.getElementsByClassName('col-md-3')[0].className += ' col-xs-12 col-sm-12'; 哪个会做你要求的。 https://jsfiddle.net/onbjhppm/2/

更新：根据评论表格OP

如果您需要使用id =“page-mod-quiz-attempt”作为唯一标识符，请改为：

var Quiz = document.getElementById('page-mod-quiz-attempt'); Quiz.getElementsByClassName('col-md-3')[0].className += ' col-xs-12 col-sm-12'; https://jsfiddle.net/onbjhppm/3/ 或者将类标识符添加到id =“page-content”元素并将链getElementsByClassName添加到您想要的那个

注意：getElementById仅适用于document。为了链接它们，您必须创建自己的函数chaining getElementById

Answer 2

我认为按照以下方式更改您的jQuery将解决您的问题，您还忘记了第一个选择器中的类名前一段时间;）...

$(function() {
  $('#page-mod-quiz-attempt #page-content div.col-md-3').addClass('col-xs-12').addClass('col-sm-12').removeClass('.col-md-3');
});