自定義jQuery-將數據過濾器添加到<select><option>

Question

我需要對自定義jQuery腳本進行修改。

我有一個自定義的jQuery腳本，它執行以下操作：

• 它將標准HTML無序列表轉換為<select>下拉列表
• 它將列表項轉換為可點擊的<options>
• <select>在桌面上是隱藏的，僅在移動設備上顯示
• 所有這些都很好用，這是屏幕截圖：

---

一切工作正常，但是我需要向每個<option>添加一個附加屬性

• 請注意每個HTML列表項的方式（data-filter =“。term-x”）
• 我還需要將此添加到<select>下拉列表中的每個<option>中

---

這是腳本運行完成后最終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>

這是創建<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()
    })
};

});

Answer 1

 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> 

添加一個.attr()命名為data-filter然后從ul追加數據過濾器