首页 文章

如何在没有特定标记名称的情况下更改div中文本块的样式

提问于
浏览 次
0

我有一个列表，其中包含多个div，用于单元组和类的节和 Span . 在每个div和spans之前，我使用带箭头的图像来展开列表和样式化的复选框输入，当整个文本字符串不能放在一行时，我不希望文本环绕图像 . 我需要它在第一行文本所在的同一点垂直对齐，而不是与图像对齐 .

不能在文本前面使用span，因为我有很长的项目列表，我使用带有span的DOM来切换列表 . 并且文本不在标签标签内，因为我使用它来设置样式复选框 .

有没有办法解决？也许使用jquery DOM选择器并制作显示块？但我似乎无法正确定位并且没有真正应用正确的样式：

$(document).ready(function () {
    $('.sections label').nextSibling.css({
        'display': 'block',
        'background-color': 'red',
        'margin-left': '5px'
    });
});

.sections {
     display: block;
     width:100%;
     margin-top: 5px;
     margin-right: 0;
 }
 .units {
     display: block;
     margin-top: 5px;
     margin-left: 15px;
 }
 .groups {
     display: block;
     margin-top: 5px;
     margin-left: 15px;
 }
 .classes {
     display: block;
     margin-top: 5px;
     margin-left: 15px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sections" id="SectionA">
    <a><img src="images/arrow_plus.png"></a>
    <input type="checkbox" name="items[]" class="regular-checkbox" id="A" value="A" />
    <label for="A"></label>
    Section A ClothesSection A ClothesSection A ClothesSection A ClothesSection A ClothesSection A Clothes	
    <span class="units" id="01units ">
        <a><img src="images/arrow_plus.png"></a>
		<input type="checkbox" name="items[]" class="regular-checkbox" id="ckeck01" value="01"/>
        <label for="01">01</label> 
        Dresses
		<span class="groups" id="01\.1hide">
		    01.1 Summer dresses
            <span class="classes" id="01\.11hide">
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.11" value="01.11"/>
                <label for="01.11"></label>
                AAAA0001 
            </span>
	        <span class="classes" id="01\.12hide">
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.11" value="01.12"/>
                <label for="01.12"></label>
                AAAA0002 
            </span>
        </span>	
        <span class="groups" id="01\.2hide">
	        01.2 Winter dresses
            <span class="classes" id="01\.20hide">
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.20" value="01.20"/>
                <label for="01.20"></label>
                AAAA0003AAAA0003AAAA0003AAAA0003AAAA0003AAAA0003AAAA0003 
            </span>
	        <span class="classes" id="01\.21hide">
                <input type="checkbox" name="items[]" class="regular-checkbox" id="01\.21" value="01.21"/>
                <label for="01.21"></label> 
                AAAA0004
            </span>
        </span>	
        <span class="groups" id="01\.3hide">
            01.3 Prom dresses
        </span>
    </span>	
    <span class="units" id="02units">
        <a><img src="images/arrow_plus.png"></a>
        <input type="checkbox" name="items[]" class="regular-checkbox" id="ckeck02" value="02"/>
        <label for="02"></label>
        02 Skirts
        <span class="groups" id="02\.1hide">
            01.1 Summer 
        </span>
        <span class="groups" id="02\.2hide">
            01.1 Winter 			
        </span>
        <span class="groups" id="02\.3hide">
            01.1 Casual skirts
        </span>
    </span>
</div>
jquery html css

1 回答

  • 0

    处理文本节点通常很难，因为我的计数5个文本节点是 .sections 的直接子节点 . 用于更好地格式化标记或错位空间的任何换行都是最终出现在标记中的文本节点的示例 . 我可以想到的唯一方法是定位那些文本节点是循环遍历元素的每个子节点并测试它作为文本节点（它是 nodeType 的3） . 即使在那之后你也可以't directly style the text node. You have to style a text node'的父母，以使其生效 . 您可以将该文本节点包装在父级中，这是我建议的 . 这是一个代码片段：

    $(document).ready(function () {
    $('.sections, .groups, .units, .classes').each(function(){
        var children = this.childNodes;
        for(var i = 0, l = children.length; i < l; i++) {
            if(children[i].nodeType === Node.TEXT_NODE && children[i].nodeValue.trim() !== '') {
                var inner = document.createElement('div');

                // preferable to use a class and CSS
                inner.className = 'highlighted';

                // but you can use inline styles too
                inner.style.backgroundColor = 'red';
                inner.style.marginLeft = '5px';

                // append it to our div and then insert it before it's original position
                inner.appendChild(children[i]);
                this.insertBefore(inner, children[i]);
            }
        }
    });
});

    需要注意的重要事项是它始终检查修剪的文本节点是否为空 . 这避免了抓取仅包含新行，空格等的节点 . 然后它将文本节点包装在div中，您可以直接添加类或直接设置样式（不建议使用后者） . 另请注意，我更改了选择器 . 理论上你仍然可以选择 label 并循环它的父节点，但是当我尝试它时，它在javascript中没有错误 . -1260990_ t . 它不会选择作为标签子项的文本节点 . 将其更改为 '.sections, .groups, .units, .classes, label' 会改变这一点 .

    这是演示：http://jsfiddle.net/yh9j5u86/1

    回复于

相关问题