带有 .Ajax()/childNodes 的 Javascript 选择器

Question

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span id="uid">021454</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span id="uid">012447</span>
        <span id="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span id="uid">0127841</span>
        <span id="qty">1</span>
    </li><br>
</ul>

js脚本

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $(????).text(),
            productType: $(????).text(),
            productQty: $(???).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});

如何从选定的li中获取整个li内容(pname，uid，qty)并通过.ajax()传递它

这就是我想做的事情:

li内容 --> 获取所有信息(pname,uid,qty) --> 放入ajax数据中 --> 传递给phpPage.php --> 返回结果

Answer 1

重复的 id 在 html 中是无效的，我建议使用类而不是 id，然后选择具有特定类的 li 的后代

<ul id="feature-deals" class="list-products">
    <li>
        <a href="#" class="pname">pink</a>
        <span class="uid">021454</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">yellow</a>
        <span class="uid">012447</span>
        <span class="qty">1</span>
    </li><br>
    <li>
        <a href="#" class="pname">violet</a>
        <span class="uid">0127841</span>
        <span class="qty">1</span>
    </li><br>
</ul>

$("#feature-deals li").click(function () {
    $.ajax({            
        url: "phpPage.php",
        type: "POST",
        data: ({
            productId: $('.uid',this).text(),
            productType: $('.pname',this).text(),
            productQty: $('.qty',this).text() 
        }),
        success : function(data){                                                           
            totalItemCart();
            $("#div1").html(data);
        }
    })


    .error(function(){
        alert('error... ohh no!');
    });

});