Question

我有一个名为cartRow的类，它包含标题，会话，日期等类，我试图单独获取每个数据，这就是为什么它包含其索引，如__0或__1或__2总是分配给它。

jquery专家可以帮助我，以便我可以单独提醒数据吗？

<div class="row cartRow">
    <div class="col-xs-12 cartItemHeader">
        <h3 class="title__0">Hello World 1</h3>
    </div>
    <div class="col-xs-12 cartItemDetail">
        <div class="col-xs-7 col-sm-5">
            <div class="row no-gutter">
                <div class="col-xs-12">
                    <span class="session__0">Fall</span>
                </div>
                <div class="col-xs-12">
                    <span class="dates__0">November</span>
                </div>
                <div class="col-xs-12">
                    <span class="faculty__0">Jones</span>
                </div>
                <div class="col-xs-12">
                    <span class="hours__0">3</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row cartRow">
    <div class="col-xs-12 cartItemHeader">
        <h3 class="title__1">Hello World 2</h3>
    </div>
    <div class="col-xs-12 cartItemDetail">
        <div class="col-xs-7 col-sm-5">
            <div class="row no-gutter">
                <div class="col-xs-12">
                    <span class="session__1">Fall</span>
                </div>
                <div class="col-xs-12">
                    <span class="dates__1">December</span>
                </div>
                <div class="col-xs-12">
                    <span class="faculty__1">Smith</span>
                </div>
                <div class="col-xs-12">
                    <span class="hours__1">3</span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

所以你不需要使用那些特殊指标（好像它们是id），因为它几乎使得在这种情况下使用类是无用的。类的美妙之处在于，您可以定位一组可以应用相同类型功能的通用组，而不是使用单独的唯一标记，并将相同的功能分别应用于每个项目。

话虽如此，您可以使用.each()和.find()以及类来完成任务：

根据评论编辑

在js中有一个已编辑的部分，以及我在html中将itemIndex属性添加到.cartRow div元素，以便您可以更轻松地区分等等。这将有助于您的想要给出数据集的唯一性。

$(document).ready(function() {
    var dataSet = []; // initialize dataSet array
	$('.cartRow').each(function() {
    	var title = $(this).find('.title').html();
        var session = $(this).find('.session').text();
        var dates = $(this).find('.dates').text();
        var faculty = $(this).find('.faculty').text();
        var hours = $(this).find('.hours').text();
        var index = $(this).attr('itemIndex');
        $('.results').append(index + ', ' + title + ', ' + session + ', ' + dates + ', ' + faculty + ', ' + hours + '<br/>');
        // you can do whatever you want with this information now
        
        // EDITED PART THAT MAY HELP YOU WITH THE NEED FOR INDIVIDUAL DATA SETS
        // creat a new object with this data inside of it;
        var item = {
            'title': title,
            'session': session,
            'dates': dates,
            'faculty': faculty,
            'hours': hours,
        };
        dataSet[index] = item; // add object to array dataSet
    });
    
    $('.getInfo').on('click', function() {
    	var selectIndex = $('.selectIndex').val();
        var selectType = $('.selectValueType').val();
        var result = '';
        if (selectIndex != '' && selectType != '') {
            result = dataSet[selectIndex][selectType];
        }
        $('.specificResults').html(result);                           
    });    
    
    // my specific information that i want
    // dataSet[desiredIndexNumber].desiredType
    console.log("faculty: "+ dataSet[2].faculty + ", Session: "+ dataSet[2].session + '');
});

.cartRow {
    width: 200px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cartRow" itemIndex = "1">
    <div class="col-xs-12 cartItemHeader">
        <h3 class="title">Hello World 1</h3>
    </div>
    <div class="col-xs-12 cartItemDetail">
        <div class="col-xs-7 col-sm-5">
            <div class="row no-gutter">
                <div class="col-xs-12">
                    <span class="session">Fall</span>
                </div>
                <div class="col-xs-12">
                    <span class="dates">November</span>
                </div>
                <div class="col-xs-12">
                    <span class="faculty">Jones</span>
                </div>
                <div class="col-xs-12">
                    <span class="hours">3</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row cartRow" itemIndex = "2">
    <div class="col-xs-12 cartItemHeader">
        <h3 class="title">Hello World 2</h3>
    </div>
    <div class="col-xs-12 cartItemDetail">
        <div class="col-xs-7 col-sm-5">
            <div class="row no-gutter">
                <div class="col-xs-12">
                    <span class="session">Fall</span>
                </div>
                <div class="col-xs-12">
                    <span class="dates">December</span>
                </div>
                <div class="col-xs-12">
                    <span class="faculty">Smith</span>
                </div>
                <div class="col-xs-12">
                    <span class="hours">3</span>
                </div>
            </div>
        </div>
    </div>
</div>
<br/><br/>
<div class="results">
    <strong>Results</strong><br/>
</div>
<br/><br/>
Type in Index number: <input class="selectIndex" type="text" /><br/>
Type in Data Value Type: (title, session, dates, faculty, hours)<input class="selectValueType" type="text" /><br/>
<button class="getInfo">Get Information Pls</button><br/>
<strong>Results</strong><br/>
<div class="specificResults">
</div>

Answer 2

删除添加了索引的唯一类。在父类的实例中隔离公共类非常容易。

Main()

然后，您可以映射<span class="session">Fall</span>的每个实例中的所有数据，但您可能还需要每个父项的标识符

cartItemDetail

JS生成表示每个购物车项目的对象数组

<div class="col-xs-12 cartItemDetail" data-item_id="356">

的 DEMO

Jquery遍历每个购物车并获取其类

2 个答案: