[英]Custom jQuery - add data-filter to <select><option>
I need make a modification to a custom jQuery script. 我需要对自定义jQuery脚本进行修改。
I've got a custom jQuery script which does the following: 我有一个自定义的jQuery脚本,它执行以下操作:
<select>
dropdown <select>
下拉列表 <options>
<options>
<select>
is hidden on desktop and only shown on mobile <select>
在桌面上是隐藏的,仅在移动设备上显示 All is working well, however I need an additional attribute to be added to each <option>
一切工作正常,但是我需要向每个
<option>
添加一个附加属性
<option>
in the <select>
dropdown <select>
下拉列表中的每个<option>
中 Here's what the final HTML output looks like on the page after script has run and done it's thing: 这是脚本运行完成后最终HTML输出在页面上的样子:
<div id="horizontal_nav">
<ul class="sub-menu">
<li><a href="http://localhost.local/site/horizontal-nav/" data-filter=".term-3"><span><strong>Horizontal Nav</strong></span></a></li>
<li><a href="http://localhost.local/site/full-width/" data-filter=".term-4"><span><strong>Full Width</strong></span></a></li>
<li><a href="http://localhost.local/site/blog/" data-filter=".term-3"><span><strong>Blog</strong></span></a></li>
<li><a href="http://localhost.local/site/cart/" data-filter=".term-4"><span><strong>Cart</strong></span></a></li>
<li><a href="http://localhost.local/site/checkout/" data-filter=".term-5"><span><strong>Checkout</strong></span></a></li>
<li><a href="http://localhost.local/site/features/" data-filter=".term-5"><span><strong>Features</strong></span></a></li>
</ul>
<select>
<option selected="selected" value="">More in this section...</option>
<option value="http://localhost.local/site/horizontal-nav/">Horizontal Nav</option>
<option value="http://localhost.local/site/full-width/">Full Width</option>
<option value="http://localhost.local/site/blog/">Blog</option>
<option value="http://localhost.local/site/cart/">Cart</option>
<option value="http://localhost.local/site/checkout/">Checkout</option>
<option value="http://localhost.local/site/features/">Features</option>
</select>
</div>
Here's the jQuery that creates the <select>
and needs the modification mentioned above 这是创建
<select>
并需要上述修改的jQuery
jQuery(document).ready(function () {
jQuery("<select />").appendTo("#horizontal_nav");
jQuery("<option />", {
"selected": "selected",
"value": "",
"text": php_data.mobile_sub_menu_text
}).appendTo("#horizontal_nav select");
jQuery("#horizontal_nav a").each(function() {
var el = jQuery(this);
jQuery("<option />", {
"value": el.attr("href"),
"text": el.text()
}).appendTo("#horizontal_nav select")
});
jQuery("#horizontal_nav select").change(function() {
window.location = jQuery(this).find("option:selected").val()
})
};
});
jQuery(document).ready(function() { jQuery("<select />").appendTo("#horizontal_nav"); jQuery("<option />", { "selected": "selected", "value": "" }).appendTo("#horizontal_nav select"); jQuery("#horizontal_nav a").each(function() { var el = jQuery(this); jQuery("<option />", { "value": el.attr("href"), "text": el.text(), "data-filter": el.attr('data-filter')//add it here }).appendTo("#horizontal_nav select") }); jQuery("#horizontal_nav select").change(function() { window.location = jQuery(this).find("option:selected").val() }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="horizontal_nav"> <ul class="sub-menu"> <li><a href="http://localhost.local/site/horizontal-nav/" data-filter=".term-3"><span><strong>Horizontal Nav</strong></span></a> </li> <li><a href="http://localhost.local/site/full-width/" data-filter=".term-4"><span><strong>Full Width</strong></span></a> </li> <li><a href="http://localhost.local/site/blog/" data-filter=".term-3"><span><strong>Blog</strong></span></a> </li> <li><a href="http://localhost.local/site/cart/" data-filter=".term-4"><span><strong>Cart</strong></span></a> </li> <li><a href="http://localhost.local/site/checkout/" data-filter=".term-5"><span><strong>Checkout</strong></span></a> </li> <li><a href="http://localhost.local/site/features/" data-filter=".term-5"><span><strong>Features</strong></span></a> </li> </ul> </div>
add an .attr()
name it data-filter
then append the data-filter from the ul 添加一个
.attr()
命名为data-filter
然后从ul追加数据过滤器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.