0

i have created with some X number of images, i want the total count of images to be displayed on top. kindly help me out how can i do this using Java Script or jQuery.

<div class="images">            
        <div class="slide">        
        <img class="photo"  src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>

    </div>
pavel
  • 26,538
  • 10
  • 45
  • 61
Shaik
  • 286
  • 2
  • 15
  • 36

2 Answers2

1

Find all images using getElementsByTagName and count them using .length.

var count = document.getElementsByTagName('img').length;

console.log(count);
<div class="images">            
        <div class="slide">        
        <img class="photo"  src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img003.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img002.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>
        <div class="slide">
        <img src="img001.jpg">
        <p>image description</p>
            <button>Delete</button>
        </div>

    </div>
pavel
  • 26,538
  • 10
  • 45
  • 61
  • 1
    With your rep you should know there's a duplicate of this already – Rory McCrossan Dec 07 '17 at 10:32
  • downvoted for trying to game the system –  Dec 07 '17 at 10:33
  • The downvote isn't needed though - it's still a correct answer after all. – Rory McCrossan Dec 07 '17 at 10:33
  • @RoryMcCrossan: I'd rather help to others than searching similar topics. – pavel Dec 07 '17 at 10:33
  • 1
    @panther That's not how SO works –  Dec 07 '17 at 10:34
  • @ChrisG: Eh? What exactly means `game the system`? If you need to downvote correct answer, no problem. Good luck :-) – pavel Dec 07 '17 at 10:34
  • @ChrisG: okay, you can find similar questions, it's your choice. If I want to put an answer here, I'll put answer here. No more comments needed. – pavel Dec 07 '17 at 10:36
  • 1
    @panther This question should've never been asked in the first place. It was marked as duplicate, which means the OP is going to get their answer, and clutter is prevented. You are gaming the system by trying to grab points. –  Dec 07 '17 at 10:36
  • @ChrisG: grab points? Heh, my motivation here isn't to gain points or whatever. I was active here 2-3 years ago and now when I have a few minutes, I'm helping to beginners. You have a big problem if your only motivation is to gain points in comunnity web or looks who _game the system_, really not my task. Recommend to visit a doctor who can helps you! Stay calm and downvote correct answers! :-) Btw. who is the referee who decide if I grab points or answer to question? :-) – pavel Dec 07 '17 at 10:40
  • @panther Really? Marking as duplicate is already helping the beginner, showing them the answer *and* telling them to do more research first. And it is most certainly not my motivation to gain points, no clue where that is coming from. Do you honestly think I'm "jealous"? As opposed to simply pissed off by your points grabbing? –  Dec 07 '17 at 10:43
  • @panther No referee necessary; the question is an obvious duplicate, which makes any answer points grabbing, high rep or not. –  Dec 07 '17 at 10:44
  • @ChrisG: jealous: really not, why? On SO are people (I believe I'm not the only one) who doesn't put answers here for any points, reputation or whatever. I had in last years over 20k answers in other developer forums (and in two I was a moderator there too) and there were no reps. You are master that you can downvote good (for OP, beginner) answers, congrats. This is my last comment to this topics, don't want to lose time with you :-) – pavel Dec 07 '17 at 10:47
  • I know there are people who don't care about gaining points, I'm one of them, FFS. My gripe is that you encouraged a newbie to post duplicates by answering his duplicate instead of flagging it. How hard is it to understand that? –  Dec 07 '17 at 10:52
0
$('.images img').length

Should get you all the img tags inside a .images class

Glitcher
  • 1,078
  • 6
  • 14