Select 内的元素 jquery

Question

我正在制作香草 javascript 条形图，我在 li 标签内制作了条形图。在下面的代码中，我使用 li 标签中的属性来设置栏的高度，但是当我尝试 select li 标签中的栏时。我做不到。


<ul class="GraphWrapper">
                        <li  bar-height="100">
                            <div class="graph-bar bar"></div>
                            MON
                        </li>
                        <li  bar-height="190">
                            <div class="graph-bar bar"></div>
                            TUES
                        </li>
                        <li  bar-height="260">
                            <div class="graph-bar bar"></div>
                            WED
                        </li>
                        <li  bar-height="180">
                            <div class="graph-bar bar bar-active"></div>
                            THURS
                        </li>
                        <li  bar-height="220">
                            <div class="graph-bar bar"></div>
                            FRI
                        </li>
                        <li  bar-height="300">
                            <div class="graph-bar bar"></div>
                            SAT
                        </li>
                        <li bar-height="50">
                            <div class="graph-bar bar"></div>
                            SUN
                        </li>
                    </ul>


//JAVASCRIPT


var children=$('.GraphWrapper').children();
for(var i=0;i<children.length;i++){

    let hgt = children[i].getAttribute('bar-height');

    bar = children[i] > $('.bar');

    bar.css('height',hgt+'px');
}

Answer 1

这是您需要的：

var children = $('.GraphWrapper').children();
for (var i = 0; i < children.length; i++) {
    let kid=$(children[i]);
    let hgt=kid.attr('bar-height');
    let bar=kid.find(".bar");
    bar.css('height', hgt + 'px');
}

因为children()函数return一个DOM对象的列表，所以需要将children[i]转换为jQuery对象，然后使用find方法查找li元素中的所有divs，最后，改变[的高度=18=]随心所欲

Answer 2

您可以在 jQuery 中使用 .each() 方法，在 JavaScript 中使用 .forEach() 方法。我也为此添加了 JavaScript 片段。检查打击片段 I

Pure JavaScript Code:

[...document.querySelectorAll('.GraphWrapper li')].forEach((el)=>{
   el.firstElementChild.style.height =  el.getAttribute('bar-height')+'px' 
});

希望对您有所帮助。

有用的链接：
.each() 方法
https://api.jquery.com/each/

.forEach() 方法
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

$('.GraphWrapper li').each((i,elem)=>{
    let ht = $(elem).attr('bar-height');
    $(elem).find('.graph-bar').css('height', ht+'px')
});

.GraphWrapper{
    width: 100%;
    max-width: 360px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: baseline;
    list-style: none;
    padding: 10px 5px;
}
.GraphWrapper li{
    width: 40px;
    font-size: 12px;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
}
.graph-bar{
    background-color: #ccc;
    width: 100%;
    height: 0;
    margin-bottom: 5px;
    transition: 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="GraphWrapper">
    <li bar-height="100">
        <div class="graph-bar bar"></div>
        MON
    </li>
    <li bar-height="190">
        <div class="graph-bar bar"></div>
        TUES
    </li>
    <li bar-height="260">
        <div class="graph-bar bar"></div>
        WED
    </li>
    <li bar-height="180">
        <div class="graph-bar bar bar-active"></div>
        THURS
    </li>
    <li bar-height="220">
        <div class="graph-bar bar"></div>
        FRI
    </li>
    <li bar-height="300">
        <div class="graph-bar bar"></div>
        SAT
    </li>
    <li bar-height="50">
        <div class="graph-bar bar"></div>
        SUN
    </li>
</ul>

Select 内的元素 jquery

Select element inside jquery

javascript

html

jquery

dom