首页 文章

在包含.mandatory类标签的div的兄弟上添加一个星号

提问于
浏览 次
0

我希望在包含带有强制类的标签的div的下一个兄弟中追加和星号 . 这表示需要表单字段 .

此必填标记使用以下代码：

jQuery('label.mandatory').parent().next().append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');

当HTML如下：

<div class="formdetails p_3">
    <div class="label">
        <label for="p_3" class="mandatory" id="p_3ErrorMessage">Sexuality</label>
    </div>
    <div class="detail" id="ext-gen13">
        <div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen15" style="width: 194px;">
            <input type="hidden" id="ext-gen17" name="p_3" value="">
            <input type="text" autocomplete="off" size="24" id="ext-gen14" class="x-form-text x-form-field" style="width: 169px;">
            <img class="x-form-trigger x-form-arrow-trigger" alt="" src="#" id="ext-gen16">
        </div>
        <input type="hidden" value="2385" name="p_id3">
    </div>
</div>

但是，在某些情况下，如果表单字段是textarea而不是文本框，则HTML略有不同：

<div class="formdetails p_1">
    <div class="label">
        <label for="p_1" class="mandatory" id="p_1ErrorMessage">CV</label>
    </div>
    <div class="detail">
        <div class="fileinputs">
              <input type="file" class="file icams-field-text required  textfield" autocomplete="off" id="p_1" name="p_1">
        </div>
        <input type="hidden" value="2376" name="p_id1">
    </div>
</div>

在这种情况下，我希望附加强制脚本文件输入div所以编写了以下jQuery脚本，首先检查fileinputs div是否存在，如果是，则尝试将强制标记附加到它 . 如果没有，它应该模仿上面脚本的行为：

jQuery('label.mandatory').each(function(){
    if($(this).parent().find('div.fileinputs').length){
        $(this).parent().next().find('div.fileinputs').append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }else{
        $(this).parent().next().append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }
})

出于某种原因，这似乎不起作用 . 我相信这可能是由于find功能无法正常工作 . 我也试过这里最近的 .

有没有人对可能出错的地方有任何建议？

可以在这里找到一个工作小提琴：http://jsfiddle.net/jezzipin/qRG57/

许多人抱怨说jQuery在这里是不必要的，所以要清理那些注释，需要IE7支持，所以我不能使用现代的CSS选择器 . 这就是为什么我不得不使用我的jQuery进行大量DOM操作而不是简单地使用CSS选择器 .

javascript jquery html css

2 回答

  • 0

    好的，我知道你希望它在现场，所以希望这是有效的 .

    使用

    .mandatory:before{
    content:" * ";
    /* more styles to align the asterisk properly */
}

    在这种情况下，您不需要使用jQuery，只需简单的CSS .

    编辑：我正在使用 input:required:before ，但记得输入不支持 :before 或 :after css :(

    回复于
  • 0

    它会出现在我的if条件下.next（）缺失所以不是看label.mandatory的父兄弟，而是看着父母而不是 .

    jQuery('label.mandatory').each(function(){
    if($(this).parent().next().find('div.fileinputs').length){
        $(this).parent().next().find('div.fileinputs').append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }else{
        $(this).parent().next().append('<span class="mandatory-marker">&nbsp;&nbsp;*&nbsp;&nbsp;</span>');
    }
})
    回复于

相关问题