get a parent id into a variable

Question

Im trying to grab the id from each parent div to store it as a variable, which I can then use for the href src for the view site button. Problem is, its just grabbing the first id rather then grabbing the one closest, or most relevant.

Im using an prepend because im going to have hundreds of divs, if it was only a couple I would just hardcode it. But thats not the case, so can anyone help?

I attached a code snippet which should illustrate the issue, my variable is currently just chucking out an undefined for the href src's.

$(document).ready(function() {

  //Set Variables  
  var Id = $(this).closest().attr('id');
  var Url = $('.box').css('background-image').split('/').pop().slice(0, -1).replace(/\.jpg/, '.htm');
  
//Create Links for Website Boxes
  $('.c').prepend('View SiteMore Info');
  


});

html,
body {
  margin: 0;
  padding: 0;
  background: #fafafa;
  font-family: 'Poppins', sans-serif;
}

.container {
  padding: 0;
  max-width: 1300px;
  margin: 40px auto;
}

.logo {}

.logo img {
  max-width: 80px;
  margin: 0 auto;
  display: table;
  padding: 50px 20px 20px 20px;
}


/* Hover styles */

.shadow {
  position: absolute;
  background-color: rgba(252, 83, 131, 0.85);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s;
  -webkit-transition: opacity .2s ease-in-out;
  background-color: rgba(126, 126, 126, 0.9);
}

.shadow a {
  color: #FFF;
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  padding: 4px 0px;
  border: 1px solid #FFF;
  width: 140px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  margin-bottom: 10px;
}

.shadow a:hover {
  background: #FFF;
  color: #000;
}

.btn-wrap {
  width: 142px;
  height: 78px;
  padding: 10px;
  margin: -44px 0 0 -76px;
  position: absolute;
  top: 50%;
  left: 50%;
}


/* Tags */

.l:after,
.c:after,
.d:before,
.a:after {
  top: 210px;
  position: relative;
  color: #FFF;
  margin-left: 10px;
  padding: 4px 10px;
  border: 1px solid #FFF;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  float: left;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 1px;
}

.l:after {
  content: 'Logo';
}

.c:after {
  content: 'Code';
}

.d:before {
  content: 'Design';
}

.a:after {
  content: 'App'
}

.filter-box {
  display: table;
  margin: 0 auto;
  margin-top: 50px;
}

.filter-box p {
  color: #CCC;
  font-weight: 500;
  font-size: 22px;
  display: inline;
  margin-right: 17px;
  position: relative;
  top: 3px;
  border-right: 1px solid #EEE;
  padding-right: 24px;
}

a.filter {
  display: inline-block;
  padding: 8px 15px 5px 15px;
  text-decoration: none;
  color: #BBB;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0px 8px;
  background: #FFF;
  border-radius: 4px;
  position: relative;
  border: 1px solid #CCC;
  transition: .2s ease all;
}

a.filter:hover,
.active {
  background: #fc5383 !important;
  color: #FFF !important;
  border-color: #f0527f!important;
}


/* End tags */

.box {
  display: block;
  width: 326px;
  height: 250px;
  background-size: cover;
  float: left;
  border: 10px solid #FFF;
  margin: 10px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.24);
  background-position: center;
  position: relative;
  /* transition: .5s ease all; */
  /* opacity: 1; */
  /* transition: opacity 0.3s; */
  /* -webkit-transition: opacity .25s ease-in-out; */
}

.box:hover .shadow {
  opacity: 1;
}

.c {
  background-position: top;
}

.long {
  width: 528px;
}

footer {
  padding: 117px 0px 60px 0px;
  /* border-top: 1px solid #DDD; */
}

footer p {
  cursor: pointer;
  transition: .1s ease all;
  margin: 0 auto;
  display: table;
  color: #CCC;
  text-align: center;
  padding: 12px 20px 8px 20px;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  border: 1px solid #CCC;
}

footer p:hover {
  color: #fc5383;
  border-color: #fc5383;
}

.hidden {
  display: none;
}


/* Media Queries */

@media all and (max-width:1400px) {
  .container {
    max-width: 1100px;
  }
  .box {
    width: 300px;
  }
  .long {
    width: 380px;
  }
}

@media all and (max-width:1200px) {
  .container {
    max-width: 1024px;
  }
  .box {
    width: 250px;
  }
  .long {
    width: 404px;
  }
}

@media all and (max-width:1100px) {
  .container {
    max-width: 90%;
  }
  .box,
  .long {
    width: 48%;
    margin: 1%;
    border: 0;
  }
}

@media all and (max-width:600px) {
  .container {
    max-width: 95%;
    margin: 0 auto;
    padding: 40px 0px;
  }
  .box,
  .long {
    width: 98%;
    margin: 3% 1%;
  }
}

.hide {
  display: none;
}

.artwork {
  display: none;
  z-index: 500;
  position: absolute;
}

.show {
  display: block;
}

.close {
  z-index: 600;
  position: absolute;
  top: 10px;
  right: 5px
}

a.middle {
  padding: 10px;
  margin: -22.5px 0 0 -81px;
  position: absolute;
  top: 50%;
  left: 50%;
}

Bob Dust · Accepted Answer

You'll probably want this:

    $(document).ready(function () {
        //Create Links for Website Boxes
        $('.box.c').each(function () {
            //Set Variables  
            var Id = $(this).attr('id');
            var Url = $(this).css('background-image').split('/').pop().slice(0, -1).replace(/\.jpg/, '.htm');
            $(this).prepend('View SiteMore Info');
        });
    });

get a parent id into a variable

Answers (2)

Related Questions