如何动态附加 jquery 函数
How to dynamically append jquery function
是否可以动态追加 jquery 函数后另一个..
这是我试过的方法
$('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;
}
不要评判代码,它只是为了让大家了解我的想法。
我正在尝试在选择器中使用 for 循环添加 next()
,例如
如果getNext(1) then it should return the selector like $('div#bottomPart').children().next().children().children().find('p').eq(3).text();
或者如果getNext(2) then it should return the selector like $('div#bottomPart').children().next().next().children().children().find('p').eq(3).text();
这是我的 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>
因为我正在使用 for 循环(不是上面的循环)根据用户提供的数据在我的 html 中找到 p
标签。
如果有附加 next()
函数的解决方案,对我来说会容易得多..
那有可能吗??
看看这是否对你有帮助:
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));
你可以用 nextAll() 和 eq() 做你想做的事。下面是一个示例,它将 select 在第 3 里之后 2 里或 4 里。
$("#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>
如果您真的想扩展 jQuery 以添加您自己的方法,您可以使用 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>
或者按照您尝试使用 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>
最后,当一个简单的 jQuery select 或者可以完成所有操作时,就没有必要进行所有链接了。
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>
是否可以动态追加 jquery 函数后另一个..
这是我试过的方法
$('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;
}
不要评判代码,它只是为了让大家了解我的想法。
我正在尝试在选择器中使用 for 循环添加 next()
,例如
如果getNext(1) then it should return the selector like $('div#bottomPart').children().next().children().children().find('p').eq(3).text();
或者如果getNext(2) then it should return the selector like $('div#bottomPart').children().next().next().children().children().find('p').eq(3).text();
这是我的 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>
因为我正在使用 for 循环(不是上面的循环)根据用户提供的数据在我的 html 中找到 p
标签。
如果有附加 next()
函数的解决方案,对我来说会容易得多..
那有可能吗??
看看这是否对你有帮助:
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));
你可以用 nextAll() 和 eq() 做你想做的事。下面是一个示例,它将 select 在第 3 里之后 2 里或 4 里。
$("#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>
如果您真的想扩展 jQuery 以添加您自己的方法,您可以使用 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>
或者按照您尝试使用 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>
最后,当一个简单的 jQuery select 或者可以完成所有操作时,就没有必要进行所有链接了。
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>