CODEWITHSUNDEEP
htmlcss-selectorsjquery-selectors
step
step

Reputation: 2410

jQuery selector for content without specific classname

This is my html markup:

<ul class="list-unstyled mb-2">
    <li class="mr-2 d-inline-block">
        <p class="m-0"><i class="fas fa-birthday-cake mr-2" aria-hidden="true"></i>Age 26-34</p>
    </li>
    <li class="mr-2">
        <p class="text-truncate m-0"><i class="fas fa-map-marker-alt mr-2"></i>City</p>
    </li>
    <li class="mr-2">
        <p class="text-truncate m-0"><i class="fas fa-calendar-alt mr-2"></i>29.10.2024 - 29.10.2024</p>
    </li>
    <li class="mr-2">
        <p class="m-0"><i class="fas fa-money-bill-alt mr-2"></i>50 USD</p>
    </li>
</ul>

Problem is that I dont know how to get content "29.10.2024 - 29.10.2024" which has before <p> with child <i> with classname "fa-map-marker-alt". Not guaranted that all LIs exists. Sometimes is only one, sometimes only 2 LIs. Its impossible use li:nth-child. How to do it to get it?

Upvotes: -1

Views: 32

Answers (1)

Mohammad Si Abbou
Mohammad Si Abbou

Reputation: 491

You can do it like this :

   $('ul.list-unstyled > li:nth-child(3) > p')
    .contents()
    .filter(function() {
        return this.nodeType === Node.TEXT_NODE;
    })
    .text()
    .trim();

it gets text only, so any other elements it will ignore, read more about contents here.

Upvotes: 0

Related Questions