Как я могу выбрать определенного c сына из указанного c множественного отца на странице

Question

У меня есть много элементов html на странице, и среди этих элементов есть несколько похожих кодов, имеющих то же имя, что и у отца класса, и имя класса сына. Когда я применяю что-то связанное с jquery к сыну, который находится внутри отца, это относится ко всем детям на странице. Я хочу применить его только к определенному сыну на странице под указанным c отцом.

Имя отца - widget В то время как имя сына - rgCate ... Этот скрипт используется :

$(".cate-sections .widget").each(function() {

  var e = $(this),
    dataTypeAtrr = $(".rgCate").data("type"),
    dataNumAtrr = $(".rgCate").data("len"),
    dataLabelAtrr = $(".rgCate").data("label"),
    dataLabelContains = $(".rgCate[data-type=" + dataLabelAtrr + "]"),
    n = Math.floor(Math.random() * dataNumAtrr + 1);


  var sfafsaf = $('.rgCate').parents('.section').siblings("widget");
  console.log(dataLabelContains);

  if (dataLabelAtrr === "recent")

    var o = "/feeds/posts/default?alt=json-in-script&max-results=" + dataNumAtrr;

  else if (dataLabelAtrr === "random")

    var o = "/feeds/posts/default?alt=json-in-script&orderby=updated&start-index=" + n + "&max-results=" + dataNumAtrr;

  else var o = "/feeds/posts/default/-/" + dataLabelAtrr + "?alt=json-in-script&max-results=" + dataNumAtrr;

  $.ajax({
    type: "GET",
    url: o,
    dataType: "jsonp",
    success: function(e) {
      for (var t = "", l = "", i = 0; i < e.feed.entry.length; i++) {
        for (var r = e.feed.entry[i],
            postAuthor = r.author[0].name.$t,
            uriauthor = r.author[0].uri.$t,
            date = r.published.$t.substring(0, 10),
            n = r.title.$t,
            o = 0; o < r.link.length; o++) {
          if ("replies" == r.link[o].rel && "text/html" == r.link[o].type) {
            r.link[o].title, r.link[o].href
          }
          if ("alternate" == r.link[o].rel) {
            var f = r.link[o].href;
            break
          }
        }
        var p;
        try {
          p = r.media$thumbnail.url, p = p.replace("s72-c", "s1600").replace("default", "hqdefault")
        } catch (n) {
          s = r.content.$t, a = s.indexOf("<img"), b = s.indexOf('data-src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), p = -1 != a && -1 != b && -1 != c && "" != d ? d : AltImage
        }
        if ("content" in r) var h = r.content.$t;
        else if ("summary" in r) h = r.summary.$t;
        else h = "";
        var u = $("<p>").html(h).text(),
          m = u.substring(0, snippetLength) + "...",
          v = r.category[0].term;

        l += '<div class="Item">',
          l += '<div class="img-content PLHolder">',
          l += '<img data-src="' + p + '" alt="' + n + '"/>',
          l += '<i class="overlay"></i>',
          l += "</div>",
          l += '<div class="details-slider">',
          l += '<a class="Author" href=' + uriauthor + ' target="_blank" rel="nofollow">' + postAuthor + '</a>',
          l += '<a class="Category" href="/search/label/' + v + '">' + v + '</a>',
          l += '<span class="Date">' + date + '</span>',
          l += "</div>",
          l += '<div class="caption">',
          l += '<h2 class="Title"><a href=' + f + '>' + n + '</a></h2>',
          l += '<p class="Snippet">' + m + '</p>',
          l += "</div>",
          l += "</div>"
      }
      t += l,
        $(".cate-sections .widget .rgCate").html(t);
    }
  })

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='cate-sections'>
  <div class="widget HTML" data-version="2" id="HTML5">
    <div class="widget-content">
      <i class="rgCate" data-type="single" data-len="5" data-label="recent">
    </i>
    </div>
  </div>
  <div class="widget HTML" data-version="2" id="HTML6">
    <div class="widget-content">
      <i class="rgCate" data-type="single" data-len="5" data-label="recent">
    </i>
    </div>
  </div>
  <div class="widget HTML" data-version="2" id="HTML7">
    <div class="widget-content">
      <i class="rgCate" data-type="single" data-len="5" data-label="recent">
    </i>
    </div>
  </div>
</div>

Answer 1

В зависимости от вашей проблемы, наиболее приемлемым решением является .find(). Я думаю, что вы можете использовать :nth-child() селектор, если хотите нацелиться на конкретного c отца и использовать его снова для конкретного c сына. Вы можете прочитать больше здесь: https://api.jquery.com/nth-child-selector/

Также, если вы собираетесь повторять код, хорошей идеей будет создать функцию или компонент, который содержит только экземпляр элемента, так что повторять или вставлять несколько раз без необходимости повторяться; это также позволит вам динамически вставлять разные имена классов, пока вы выполняете итерацию с использованием самого итератора l oop, таким образом, вы можете иметь разные имена классов, и впоследствии будет проще ориентироваться.

Answer 2

для меня это звучит так, как будто вы ищете .find() метод jQuery.

А именно

$(".cate-sections .widget").each(function() {
    var e = $(this)  // e holds reference to this specific .widget now
    var icon = e.find('.rgCate')  // finds a .rgCate, which is a descendant of e instead of globally
    // …
})

Другая вещь, которую я хотел бы do создает l как объединение над массивом. То есть вместо

l = '<div class="Item">'
l += '<div class="img-content PLHolder">'
// and so on

я бы написал это как

l = [
  '<div class="Item">',
  '<div class="img-content PLHolder">',
  // and so on
].join('')

Вы можете добавить больше элементов перед вызовом .join('') с помощью .push(additionalElement).