CODEWITHSUNDEEP
javascripthtmljqueryjquery-selectors
Cybertronian
Cybertronian

Reputation: 483

How to dynamically append jquery function

Is it possible to append dynamically jquery function after another..

Here's what I've tried

$('div#bottomPart').children().getNext(3).children().children().find('p').eq(3).text();

function getNext(num) {
    var appendNext = "";
    for (var i = 0; i < num; i++) {
        appendNext = appendNext + next();
    }
    return appendNext;
}

don't judge the code it's just to give you all an idea of my thought.

I'm trying to add next() using a for loop in the selector something like

if getNext(1) then it should return the selector like $('div#bottomPart').children().next().children().children().find('p').eq(3).text();

or if getNext(2) then it should return the selector like $('div#bottomPart').children().next().next().children().children().find('p').eq(3).text();

Here's my HTML:

<div id="bottomPart">
    <div class="card d-flex flex-row mb-3 table-heading">
        <div class="d-flex flex-grow-1 min-width-zero">
            <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center" id="compareHeading">
                <p class="list-item-heading mb-0 truncate width-30 w-xs-100">Parameters</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">
                    <img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Go Digit General Insurance Company Ltd..jpg" alt="Go Digit General Insurance Company Ltd.">
                </p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">
                    <img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Reliance General Insurance Company Ltd..jpg" alt="Reliance General Insurance Company Ltd.">
                </p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">ENTERPRISE</p>
            </div>
        </div>
    </div>
    <div class="card d-flex flex-row mb-3">
        <div class="d-flex flex-grow-1 min-width-zero">
            <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
                <p class="list-item-heading mb-0 truncate width-30 w-xs-100">Own Damage Cover</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">od1</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">od2</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">od3</p>
            </div>
        </div>
    </div>
    <div class="card d-flex flex-row mb-3">
        <div class="d-flex flex-grow-1 min-width-zero">
            <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
            <p class="list-item-heading mb-0 truncate width-30 w-xs-100">Team permissions</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">tp1</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">tp2</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">tp3</p>
        </div>
    </div>
</div>
<div class="card d-flex flex-row mb-3">
    <div class="d-flex flex-grow-1 min-width-zero">
        <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
            <p class="list-item-heading mb-0 truncate width-30 w-xs-100">24/5 Support</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">su51</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">su52</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">su53</p>
        </div>
    </div>
</div>
<div class="card d-flex flex-row mb-3">
    <div class="d-flex flex-grow-1 min-width-zero">
        <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
            <p class="list-item-heading mb-0 truncate width-30 w-xs-100">24/7 Support</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">su71</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">su72</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">su73</p>
        </div>
    </div>
</div>
<div class="card d-flex flex-row mb-3">
    <div class="d-flex flex-grow-1 min-width-zero">
        <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
            <p class="list-item-heading mb-0 truncate width-30 w-xs-100">User actions audit log</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">log1</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">log2</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">log3</p>
        </div>
    </div>
</div>

As I am using a for loop (not the above one) to find the p tag in my html according to data given by user.

If only there's a solution for appending the next() function it would be a lot easier for me..

So is it possible??

Upvotes: 1

Views: 328

Answers (2)

epascarello
epascarello

Reputation: 207521

You can do what you are after with nextAll() and eq(). Below is an example that will select 2 lis after or 4 lis after the 3rd li.

$("#li3").nextAll().eq(1).css("color", "green")
$("#li3").nextAll().eq(3).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li id="li3">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

If you really want to extend jQuery to add your own method you do it with jQuery.fn. 

jQuery.fn.extend({
  getNext: function(cnt) {
    return $(this).nextAll().eq(cnt - 1)
  },
})
$("#li3").getNext(2).css("color", "green")
$("#li3").getNext(4).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li id="li3">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

Or doing it the way you were trying with next()

jQuery.fn.extend({
  getNext: function(cnt) {
    var elem = $(this)
    while(cnt>0 && elem.length) {
      elem = elem.next()
      cnt--
    }
    return elem
  },
})
$("#li3").getNext(2).css("color", "green")
$("#li3").getNext(4).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li id="li3">3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>

In the end there is no need to do all that chaining when a simple jQuery selector can do it all. 

var text = $("#bottomPart > div:eq(2) div.card-body > p:eq(2)").text()
console.log(text)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bottomPart">
    <div class="card d-flex flex-row mb-3 table-heading">
        <div class="d-flex flex-grow-1 min-width-zero">
            <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center" id="compareHeading">
                <p class="list-item-heading mb-0 truncate width-30 w-xs-100">Parameters</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">
                    <img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Go Digit General Insurance Company Ltd..jpg" alt="Go Digit General Insurance Company Ltd.">
                </p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">
                    <img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Reliance General Insurance Company Ltd..jpg" alt="Reliance General Insurance Company Ltd.">
                </p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">ENTERPRISE</p>
            </div>
        </div>
    </div>
    <div class="card d-flex flex-row mb-3">
        <div class="d-flex flex-grow-1 min-width-zero">
            <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
                <p class="list-item-heading mb-0 truncate width-30 w-xs-100">Own Damage Cover</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">od1</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">od2</p>
                <p class="mb-0 text-primary w-20 w-xs-100 text-center">od3</p>
            </div>
        </div>
    </div>
    <div class="card d-flex flex-row mb-3">
        <div class="d-flex flex-grow-1 min-width-zero">
            <div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
            <p class="list-item-heading mb-0 truncate width-30 w-xs-100">Team permissions</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">tp1</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">tp2</p>
            <p class="mb-0 text-primary w-20 w-xs-100 text-center">tp3</p>
        </div>
    </div>
</div>

Upvotes: 1

Benilson
Benilson

Reputation: 734

See if this help you:

function getNext(selectorJquery, methodsValues) {
    var next = $(selectorJquery);
    $(methodsValues).each(function() {
        for (var method in this) {
            if (this[method] !== null) {
                next = next[method](this[method]);
            } else {
                next = next[method]();
            }
        }
    });

    return next;
}

var methodsValues = [
    {children: null},
    {next: null},
    {children: null},
    {children: null},
    {find: 'p'},
    {eq: 3},
    {text: null}
];

console.log($('div#bottomPart').children().next().children().children().find('p').eq(3).text());
console.log(getNext($('div#bottomPart'), methodsValues));

var otherMethodsValues = [
    {children: null},
    {next: null},
    {next: null},
    {children: null},
    {children: null},
    {find: 'p'},
    {eq: 3},
    {text: null}
];

console.log($('div#bottomPart').children().next().next().children().children().find('p').eq(3).text());
console.log(getNext('div#bottomPart', otherMethodsValues));

Upvotes: 2

Related Questions