将两个类似的jQuery脚本合并为一个if/then脚本 [英] Combine two similar jQuery scripts into an if/then script
问题描述
I am trying to combine two jQuery loops, based on code from questions answered here, which remove images and iframes from WordPress posts and move them either to new divs or to new lists. My previous questions have sought to achieve each of these outcomes independently, but I now need to combine them in a single page, selecting which one to use based on the parent container.
具体来说，我希望第一个脚本在所有具有#clients ID的容器之外的所有<section>容器上运行.那应该使用第二个脚本.
Specifically, I want the first script to run on all <section> containers apart from the one with the #clients ID. That one should use the second script.
我想我可能需要某种if/then逻辑来运行适合于选择器的代码，但是很难做到这一点.目前，一个脚本破坏了另一个脚本.
I imagine I probably need some kind of if/then logic which runs the code appropriate to the selector, but am having a hard time achieving this. Currently, one script is breaking the other.
这是两个脚本-请注意第4行括号中的注释:
Here are the two scripts - please note the comment in parentheses on line 4:
jQuery("document").ready (function($){
// Elements you want to match
var matchesEl = "img, iframe"
// For each section [I have added a 'not-#clients' selector, which doesn't work but gives an idea of the logic I'm attempting], get its index number and do the following:
$('section !#clients').each(function(index){
//If there is a matched element (for each section),
if ($(this).find(matchesEl).length > 0) {
// create a div.royalSlider and prepend to this section
$('<div>', {'class': 'royalSlider'}).prependTo(this)
// For each matched element into this section (we don't need to get index number here),
$(this).find(matchesEl).each(function() {
// add .rsImg class to this element and insert on the div.royalSlider,
// not any div.royaSlider, but that one with equivalent index given before
$(this).addClass('rsImg').appendTo($('section .royalSlider').eq(index));
});
}
});
});
jQuery("document").ready (function($){
var matchesEl = "img, iframe"
$('section #clients').each(function(index){
if ($(this).find(matchesEl).length > 0) {
$('<ul>').appendTo($('section');
$(this).find(matchesEl).each(function() {
//The line code under will only works if all your <section>s always have at least one matched element.
//$("<li>").append($(this)).appendTo($('section ul').eq(index));
//So the right code is:
$("<li>").append($(this)).appendTo($('section').eq(index).children('ul'));
});
}
$('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove();
});
});
我需要运行一个基于jQuery选择器选择性运行的脚本，而不是运行两个冲突的脚本.
Rather than running two scripts that clash, I need to develop one script that selectively runs based on the jQuery selector.
我将尝试编写此统一脚本并将其发布在此处，而不是显示这两个脚本，但是当前第二个脚本(尝试创建<ul>元素)根本不起作用，并且我不确定如何让它单独工作，这似乎是将它们组合在一起的先决条件.
I would attempt to write this unified script and post it here, rather than showing the two, but currently the second script (which attempts to create <ul> elements) does not work at all, and I am not sure how to get that working alone, which would seem to be a prerequisite for combining them.
如果有帮助，可以在开发阶段查看我正在处理的网站！此处
If it helps, the site I am working on can be viewed (in developmental stages!) here.
在此先感谢您的帮助.
推荐答案
1)使用$('section:not(#clients)')代替$('section !#clients')
2)您不需要两次jQuery("document").ready (function($){ ... });.您只能将所有脚本放在一个脚本中.而且，如果第二次仍具有相同的内容，则无需两次声明var matchesEl.
2) You do not need to have jQuery("document").ready (function($){ ... }); twice. You can put all script in only one. And you do neither need to declare var matchesEl twice if it still have the same content on second time.
3)从语义上来说，如果您使用的是名为clients的ID，则页面上只能有一个#clients，因此该元素中不需要each()函数.
3) Semantically, if you are using a id called clients you must have only one #clients on your page, so no need for a each() function in that element.
上面的代码应该可以解决问题:
The code above should do the trick:
jQuery("document").ready (function($){
// Elements you want to match
var matchesEl = "img, iframe"
// For each section [I have added a 'not-#clients' selector, which doesn't work but gives an idea of the logic I'm attempting], get its index number and do the following:
$('section:not(#clients)').each(function(index){
//If there is a matched element (for each section),
if ($(this).find(matchesEl).length > 0) {
// create a div.royalSlider and prepend to this section
$('<div>', {'class': 'royalSlider'}).prependTo(this)
// For each matched element into this section (we don't need to get index number here),
$(this).find(matchesEl).each(function() {
// add .rsImg class to this element and insert on the div.royalSlider,
// not any div.royaSlider, but that one with equivalent index given before
$(this).addClass('rsImg').appendTo($('section .royalSlider').eq(index));
});
}
});
//No need for each() here (neither index)
// If there is a matched element in #clients, do:
if ($('#clients').find(matchesEl).length > 0) {
// Append <ul> to #clients
$('<ul>').appendTo($('#clients'));
// For each matched element into #clients
$('#clients').find(matchesEl).each(function() {
//Create a <li>, append the element content into <li> and insert it on <ul> into #clients
$("<li>").append($(this)).appendTo($('#clients').children('ul'));
});
}
$('p').filter(function () { return $.trim(this.innerHTML) == "" }).remove();
});
这篇关于将两个类似的jQuery脚本合并为一个if/then脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
