javascript - 使用 jquery 隐藏 Qualtrics 中的列表项

Question

我可以使用常规 JavaScript 隐藏 Qualtrics 中的列表项(本例中的第一个)。下面的屏幕截图显示了我的问题。

这是我在属于该问题的 javascript 窗口中输入的代码:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your JavaScript Here*/

    $(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none";

});

我想知道如何使用 jQuery 实现同样的效果？

<小时/>

感谢 this handy guide 我已经成功安装了 jQuery通过添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

在标题的源 View 中。此外，我在属于这个问题的 javascript 窗口顶部添加了 var jq = jQuery.noConflict(); 。

通过进一步检查源代码，我发现问题的ID是QID2。基于this answer因此我尝试了

$("#QID2 .ChoiceStructure ul li:eq(0)").hide();

但没有成功。

请注意，理想情况下我不想手动指定问题 ID，而是像使用常规 JavaScript 那样引用问题。

编辑:质量问题的 html 是:

<div class="QuestionOuter BorderColor MC  QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed"> 

    <div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR"> 

        <div class="InnerInner BorderColor TX"> 

            <fieldset> 

            <!-- BEGIN PARTIALS -->
            <!-- Partial for defining the ControlContainerContent -->
            <!-- END PARTIALS -->

            <h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2>

            <div class="QuestionBody"> 

                <!-- Begin Choices w/o choice groups --> 

                <ul class="ChoiceStructure">    

                    <li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label>  <span class="LabelWrapper">  <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected">   <span>a (0)</span></label></span> <div class="clear"></div> </li>   
                    <li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label>  <span class="LabelWrapper">  <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected">   <span>a (1)</span></label></span> <div class="clear"></div> </li>   
                    <li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label>  <span class="LabelWrapper">  <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected">   <span>b (2)</span></label></span> <div class="clear"></div> </li>   
                    <li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label>  <span class="LabelWrapper">  <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected">   <span>b (3)</span></label></span><div class="clear"></div> </li>   

                </ul> 
                <!-- End Choices w/o choice groups --> 

                <div class="clear zero"></div>

            </div> 

            </fieldset> 

        </div> 

    </div> 

</div>

Answer 1

您可以使用prototypejs(Qualtrics已经使用)来非常简单地做到这一点:

Qualtrics.SurveyEngine.addOnload(function()
{
    $(this.questionId).down('li').hide();
});