Select element inside jquery

Question

I was making a vanilla javascript bar graph where I made the bar inside the li tag. In the code below, i use the attribute within the li tag to set the height of the bar, but when I try to select the bar from within the li tag. I am unable to do so.


<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');
}

I don't undestand what do you want to do exactly. Could you describe it a little bit more? — Juan Manuel Sanchez Diaz
– Juan Manuel Sanchez Diaz, Commented Jun 2, 2022 at 3:27
I want to select the bar class so that I could change it's height according to the iteration(i) it is inside of. for Example; if the:- i=2 then i want to get the bar class inside the i of that particular instance. — Davis Johnson
– Davis Johnson, Commented Jun 2, 2022 at 3:29

The KNVB · Accepted Answer · 2022-06-02 07:58:46Z

1

Here is what you need:

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');
}

Because the children() function return a list of DOM object, so you need to convert the children[i] to jQuery object, and then use the find method to find all divs in the li element, finally, change the height of the div as you want.

edited Jun 2, 2022 at 7:58

answered Jun 2, 2022 at 3:32

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raeesh Alam · Accepted Answer · 2022-06-02 10:01:33Z

You can use .each() method in jQuery and .forEach() method in JavaScript. I putted JavaScript snippet for this also. Check blow snippet I

Pure JavaScript Code:

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

hope this will help you a lot.

Helpful Links:
.each() Method
https://api.jquery.com/each/

.forEach() Method
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>

Collectives™ on Stack Overflow

Select element inside jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related