Utilizing Google Chrome Developer Tools for JQuery console debugging

Just started using jQuery and was expecting to see [<li>my name</li>, in the Google Chrome console but got:

[li, prevObject: r.fn.init(1)] 0 : li length : 1 prevObject : r.fn.init(1) proto : Object(0)

<html>
<head>

<title>fww</title>

</head>

<body>

<ul>
    <li>my name</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
    var lis = jQuery('ul li');
    console.log(lis);
</script>
</body>

</html>

 <html>
    <head>

    <title>fww</title>

    </head>

    <body>

    <ul>
        <li>my name</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>
        var lis = jQuery('ul li');
        console.log(lis);
    </script>
    </body>

    </html>

Answer №1

Here is the correct way to retrieve the desired information! No mistakes have been made. By treating 'ul li' as a jQuery object, you are able to access all inherited properties and methods associated with that jQuery object. To display individual properties, utilize the appropriate methods provided by the jQuery object. For instance, to display the text within the li element, simply append

.text() 

to the original object like so:

jQuery('ul li').text();  

Alternatively, if you wish to determine the number of li elements present, you can use:

jQuery('ul li').length();

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

Attempting to achieve the simultaneous display of an image overlay and image zoom when hovering over the mouse

I'm struggling to display an image overlay and image zoom simultaneously when hovering the mouse. After adding the image zoom effect, the overlay disappears. It seems like one transition is overriding the other. Whenever the zoom works, the overlay do ...

Incorporate row numbering feature into jQuery DataTables

Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...

Ensure that you include validation in the ajax request when loading the message content from a separate file

ajax code for adding data to the database <script type="text/javascript"> $(function() { $(".submit_button").click(function() { var textcontent = $("#content").val(); var dataString = 'content='+ textcontent; if(textcontent=='') ...

Conceal the ancestor if the descendant four generations down is vacant

Hey there, I've been working with Beaver Builder on a website and integrating ACF to include a video module. However, not every page will necessarily have a video, and when it's not added, the div.fl-row still appears. I tried using a function to ...

What are the buttons featured in the header of this mobile-friendly bootstrap panel

Can anyone offer advice on how to make a bootstrap panel header responsive? The panel has a title with several buttons on the right side. While it looks good on a large screen, it becomes messy on smaller browser sizes. You can find my complete code here ...

Bootstrap 4 Multinav Navigation with Adjusted Z-index

Using Bootstrap 4, I have created a modified multi-flyout navigation menu. The HTML code for this structure is as follows: <ul class="nav"> <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Destinations</a> < ...

Merging the Select and Input elements side by side using Bootstrap grid system

Is there a way to combine all form group items like Select and Input using only the bootstrap framework? I attempted the method below, but there is an extra space between the Select and Input Box. Check out the DEMO ...

Trouble exporting to Excel on Chrome and Firefox browsers

I am having an issue with exporting tables to Excel using JS. The <table> tag contains some descriptions and a class (<table class="someClassName" border="0" cellpadding="0" cellspacing="0">). When the table is exported to Excel, the Excel fil ...

Creating Hover Effects for Touch Screen Devices with jQuery

Recently, I came across a piece of code that enables a link to become active on the second tap when using touch screen devices. I found this code snippet from: hnldesign.nl (function($) { var landingLink = '.nav-landing > li'; if ((' ...

When implementing the "box-sizing: border-box" reset, the layout may become distorted if the image height is specified in percentage

I am facing an issue with my header containing a logo when I apply the box-sizing: border-box reset. Here is the functional header: .header-container { height: 60px; width: 100%; background-color: #333333; color: white; display: flex; justif ...

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

Trouble with virtual canvas when attempting to put image data

I am new to the virtual canvas concept and I'm having trouble with the code below. Can anyone help me figure out why it's not working? <script type="text/javascript"> $(document).ready(function () { var c1 = docu ...

Dynamic horizontal div elements laid out in a repeating pattern using CSS Grid

I'm fairly new to CSS/Html/JS and I'd like to create a row of Boxes (loaded from a json file) displayed horizontally. Something similar to this: Here's the code snippet I've been using: <style> .wrapper { display: grid; ...

Using PHP and Ajax to retrieve a distinct string prior to executing a time-consuming script

It's a question that comes up often. In short, I want to display progress to the user while a lengthy script is running. This is my approach: store "progress" in mysql so that Ajax can access it (via PHP). "progress()" is the lengthy script being te ...

Using JavaScript to dynamically fill a select dropdown menu

Currently, I am working on a Ruby on Rails application that involves two drop-down boxes. The challenge is to populate the second drop-down box based on the selection made in the first one. Here is the HTML code snippet: -Releases = Release.all %table. ...

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML

I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...

Ways to access the HTML content of a component in vue.js

I have a unique html template displayed below CustomTemplate.vue <template> <div class="content custom-page"> <md-card class="page-display"> <md-card-header class="page-header"> <md-card- ...

The jQuery validation applied to the data submission per post is not functioning as expected as the $_POST variable is appearing empty

I'm facing an issue with Jquery, AJAX, and field validation. Although the validation and redirect are working fine, I'm having trouble retrieving values from fields in the $_POST array. Below is the start tag of the form: <form class="smart ...

Steps for Deactivating HTML Links

I am facing an issue with a link button inside a <td> that needs to be disabled. It is working fine on Internet Explorer but not functioning properly in Firefox and Chrome. I have tried various methods, but nothing seems to work on Firefox (using ve ...

Performing Jquery functions on several elements at once

Looking at the code snippet below, there are two buttons and an input in each container. The input calculates and adds up the number of clicks on the 2 buttons within the same container. However, it currently only works for the first container. How can thi ...