Is it possible to create a grid by arranging each statement with a specific format?

After fetching and parsing some data, I have utilized the 'each' function to display it:

$.ajax({
    url      : 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent('http://news.google.com/news?pz=1&cf=all&ned=uk&hl=en&output=rss'),
    dataType : 'json',
    success  : function (data) {
        if (data.responseData.feed && data.responseData.feed.entries) {
            $.each(data.responseData.feed.entries, function (i, e) {
                $('.row').append("<div class=\"threecol\"">title: " + e.title + "<br></div>");
            });
        } 
    }
});

In order for the grid to work properly, it must adhere to this structure:

<div class="container">
    <div class="row">
        <div class="threecol">
        </div>
        <div class="threecol">
        </div>
        <div class="threecol">
        </div>
        <div class="threecol last">
        </div>
    </div>
</div>

My query revolves around how to organize the each loop so that every set of 4 items creates a new row, with the 4th item having the class "threecol last" instead of just "threecol"?

Answer №1

Prior to your $.each loop, implement a counter and incorporate simple conditions to correctly place the rows while assigning appropriate classes:

if (c % 4 == 0) { 
  $('<div />').addClass('row').appendTo('.container'); 
}

$('<div />').addClass('threecol')
            .text('title: ' + e.title)
            .appendTo('.row:last');

if (c % 4 == 3) {
  $('.threecol:last').addClass('last');
}

c++;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to detect when the escape key is pressed?

Is there a way to detect when the escape key is pressed in Internet Explorer, Firefox, and Chrome? I have code that works in IE and alerts 27, but in Firefox it alerts 0 $('body').keypress(function(e){ alert(e.which); if(e.which == 27){ ...

The function of window.location is not responsive when used in conjunction with an ajax

The main page redirect occurs in 2 scenarios: When the user clicks logout When the session expires Code for logout functionality: $("#logoutLink").click(Logout); function Logout() { $.post("Logout", { antiCSRF: '{{acsrf}}&apo ...

Incorporating Anchors for Seamless Navigation in Menus

My website has various sections on the homepage and I want to add an anchor link to the navigation. This will allow users to scroll down to a specific section, like "About Us," when clicking on the appropriate nav link. I also need the anchor link to work ...

How can we efficiently retrieve newly submitted JSON data using AJAX?

Is there an efficient way for a user to input a number, submit it, and have it update a JSON page without refreshing the entire webpage? Can this be achieved using an ajax call? The code below retrieves game data, but I want it to update when the user su ...

Are multiple if statements the key to success or a disaster waiting to happen?

I want to extract specific values from a JSON response that contains information about videos on Wistia. Currently, the JSON response only includes two videos (slatwall.mp4 & igoodworks.mp4) along with their respective data. You can view the JSON HERE. Th ...

In VB.NET, one can easily detect the HTML tag and update its content

I currently have some data stored in a database, which looks like this: <p><font style="BACKGROUND-COLOR: gold" size="+2" face="Arial Black"><strong>test</strong><u> test1</u> </font>< ...

Performing a jQuery ajax POST request to log users in

I am currently facing a challenge with my .ajax request being made through a form for the purpose of logging in. Upon submitting my form, I am not receiving any response from either the success or error functions. Interestingly, even when I inserted an a ...

JavaScript is utilized to update HTML content through an Ajax request, but unfortunately, the styling is

Apologies for the unconventional title, I am currently in the process of creating a website. When the page is initially loaded, I call upon two scripts within the 'head' tag to create an attractive dynamic button effect. <script src="https:// ...

Utilizing Angular's ng-repeat with varying directives for each iteration

I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...

Leveraging jQuery within Node.js

Greetings, I am a newcomer here and I hope that my message is clear. My current challenge involves trying to incorporate jQuery into node.js, but unfortunately, all my efforts have ended in failure. I have spent hours attempting to resolve this issue to no ...

Button click not triggering Ajax functionality

I've been working on implementing a simple Ajax function in a JSP using JQueryUI. The goal is to pass two text fields from a form and use them to populate two separate divs. However, when I click the button, nothing seems to be happening. I even tried ...

Enhance your website's accessibility by using JavaScript to allow the down and up arrow keys to function

Thank you for taking the time to read this, any feedback is greatly appreciated. The current script on my website is only partially functional (click "i" in the bottom right corner). Currently, the script will focus on the first link AFTER pressing the T ...

Iterate through each row in a table to locate a particular control by its ID and retrieve its

Is there a way to write a jQuery function that can loop through table rows and find hidden field values based on a specific hidden control ID ("hdnIsEmpty") without affecting other hidden controls? I'm facing this challenge and need help with finding ...

Do you know of any lightweight and user-friendly date/time picker options available for web applications?

Here are a few things I'm looking for: I prefer jQuery based solutions. I value easy user interface over flashy design. A combined date and time picker would be ideal. I want to note that I've already explored numerous options through Google s ...

Changing the size of various types of images

Is there a way in JavaScript to automatically resize and fill in a block with fixed width using different images with various dimensions? I came across something similar, but it was in AS2. I'm unsure if it can be translated to JavaScript. var _loc3 ...

What are some ways I can customize the appearance of a Bootstrap 5 Navbar specifically when it is in the collapsed

Currently utilizing Bootstrap 5, my goal is to align the Navbar social icons to the left when the navbar is collapsed for small/mobile devices, and to the right when viewed on a larger screen. Can you assist in identifying which selectors need styling for ...

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

Guide to sending multiple checkboxes using jQuery AJAX in CodeIgniter

I'm encountering an issue with my code when I click the 'Simpan' button, the response in the URL is: Output in URL: localhost/rootappl/moduls/krs myCheckboxes%5B%5D=KFT106&myCheckboxes%5B%5D=KFT107&submit=Simpan HTML CODE: [IMG] ...

Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have in ...

Animating a jQuery Knob as you scroll from 0 to a set value

I am new to jQuery and currently working on jQuery Knob. Everything is functioning properly, but I have encountered an issue. When scrolling to the section with the knobs, I would like them to animate from 0 to a specific value. Is there a way to achieve ...