Question

我在网站上实现了以下代码。

“时间”类存储时隙和 “费用”类存储价格

我要选择“ abc”类，其中- “时间”课程必须在06:00和12:00之间，然后在06:00-12:00之间，我们需要在跨度范围内寻找最高的“费用”值

我可以选择时隙和最高成本，但不能将两个功能组合在一起。

// Selection of Time Slots

var timeSlots = $(".master > .abc > .time > span").text();
var timeArray = timeSlots.split('NonStop');

var resultArray = new Array();
for (var i = 0; i < timeArray.length; i++) {
  var bar = /(^06|^07|^08|^09|^10|^11)/;
  if (bar.test(timeArray[i])) {
  //  console.log("found time");
    resultArray.push(timeArray[i]);
  }
};


// Selection of Highest Cost

var priceCount = $(".master > .abc > .cost > label").text();
var priceArray = priceCount.split('₹');
var myFilterArray = priceArray.filter(Boolean);
var highestPrice = myFilterArray[0];
for (var a = 1; a < myFilterArray.length; a++) {
  if (myFilterArray[a] > highestPrice) {
    highestPrice = myFilterArray[a];
  }
}
console.log(highestPrice);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="master">
  <div class="abc">
    <div class="time"><span>06:05 NonStop</span></div>
    <div class="cost"><label class><span>₹2,987</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>03:05 NonStop</span></div>
    		<div class="cost"><label class><span>₹4,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>07:05 NonStop</span></div>
    		<div class="cost"><label class><span>₹8,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>08:15 NonStop</span></div>
    		<div class="cost"><label class><span>₹1,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>15:45 NonStop</span></div>
    		<div class="cost"><label class><span>₹9,976</span><label></div>
    	</div>
    </div>

Answer 1

您可以使用:contains() Selector实现目标。实际上，您实际上并不需要拥有可以为您做的其他方法。

// Selection of Time Slots

var price = $(".master > .abc > .cost > label");

var timeSlots = $(".master > .abc > .time > span").text();
var timeArray = timeSlots.split('NonStop');
var highestPrice = 0;
var hPriceStr = "";
var resultArray = new Array();
for (var i = 0; i < timeArray.length; i++) {
  var bar = /(^06|^07|^08|^09|^10|^11)/;
  if (bar.test(timeArray[i])) {
    var sp = $(price[i]).text().split("₹")[1];
    var tempPrice = Number(sp.replace(",", ""));
    if (highestPrice < tempPrice) {
      highestPrice = tempPrice;
      hPriceStr = sp;
    }
    resultArray.push(timeArray[i]);
  }
};



var selector = ".master > .abc > .cost > label:contains('₹" + hPriceStr + "')"
$(selector).css("background", "#ff9900");
//console.log(highestPrice);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="master">
  <div class="abc">
    <div class="time"><span>06:05 NonStop</span></div>
    <div class="cost"><label class><span>₹2,987</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>03:05 NonStop</span></div>
    		<div class="cost"><label class><span>₹4,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>07:05 NonStop</span></div>
    		<div class="cost"><label class><span>₹8,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>08:15 NonStop</span></div>
    		<div class="cost"><label class><span>₹1,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>15:45 NonStop</span></div>
    		<div class="cost"><label class><span>₹9,976</span><label></div>
    	</div>
    </div>

Answer 2

我认为在这种情况下使用的最佳做法是：呈现html时，向span元素添加一个属性。

示例：

<div class="abc">
    <div class="time"><span intime="0305">03:05 NonStop</span></div>
    <div class="cost"><label class><span>₹4,976</span><label></div>
</div>

然后

var timeSlots = $(".master > .abc > .time > span").each(function(i, e){
    var time = $(this).attr('intime');
    if( parseInt(time) > 0600 && parseInt(time) < 1200)
    {
        resultArray.push( $(this).val() );
    }
};

Answer 3

嗨，我认为您可以使用数组对象和轻量级代码

var arrdata = [];

$.each($(".abc"), function (index, data) {
       arrdata.push(
       {
         index : index ,
         time: $(".abc:eq("+index+") > .time  span").text() , 
         price: $(".abc:eq("+index+") > .cost span").text().split("₹")[1] 
       });                             
      
});
var maxdata= [];
$.each(arrdata, function (index, data) {
  if (index === 0 )   
  {
    maxdata = arrdata[index]; 
  
  }
  else 
  {
     if (arrdata[index].price > maxdata.price )
     {
      maxdata = arrdata[index];
     
     }
   }
 
})
console.log(maxdata);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="master">
  <div class="abc">
    <div class="time"><span>06:05 NonStop</span></div>
    <div class="cost"><label class><span>₹2,987</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>03:05 NonStop</span></div>
    		<div class="cost"><label class><span>₹4,976</span><label></div>
    	</div>
      <div class="abc">
    		<div class="time"><span>15:45 NonStop</span></div>
    		<div class="cost"><label class><span>₹9,976</span><label></div>
    	</div>
    	<div class="abc">
    		<div class="time"><span>07:05 NonStop</span></div>
    		<div class="cost"><label class><span>₹8,976</span><label></div>
    	</div>
      
    	<div class="abc">
    		<div class="time"><span>08:15 NonStop</span></div>
    		<div class="cost"><label class><span>₹1,976</span><label></div>
    	</div>
    	
    </div>

此代码可以帮助您

jQuery |从跨度中有特定文本的多个类别中选择类别

3 个答案: